1、localStorage 概念

HTML5 web 存储:HTML5 提供了两种在客户端存储数据的新方式:localStorage 和 sessionStorage ,两者都是仅在客户端(即浏览器)中保存,不参与和服务器的通信。

早些时候,本地存储使用的是 cookie,。但是 cookie 不适合大量数据的存储,后来 HTML5 提供了 localStorage 和 sessionStorage Web,这些数据不会被保存在服务器上,它也可以存储大量的数据,而不影响网站的性能。数据以键/值对存在且只允许该网页访问使用。

2、localStorage 特征

  • 生命周期:持久化的本地存储,保存的数据没有过期时间,直到手动去除。
  • 存储的信息在同一域中是共享的。
  • 当本页操作(新增、修改、删除)了localStorage的时候,本页面不会触发storage事件,但是别的页面会触发storage事件。
  • 大小:据说是5M(跟浏览器厂商有关系)
  • 在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。
  • localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
  • localStorage受同源策略的限制

3、sessionStorage

用于临时保存同一窗口(或标签页)的数据,在关闭浏览器或该标签页之后就会删除这些数据。

4、JavaScript操作 localStorage 和 sessionStorage 

不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(下面以localStorage为例):

  • 保存数据:localStorage.setItem(key,value);    或者:localStorage.keyName;
  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);

当我们想在 localStorage 和 sessionStorage 中存储对象时,可以先用 JSON.stringify(obj) 方法将对象转换为字符串,然后进行存储。要想将值作为对象输出可以用  JSON.parse(str) 方法将字符串转换为对象。

5、cookie、localStorage 、 sessionStorage 的区别和共同点

共同点:

  • 都是保存在本地浏览器端。

 

区别如下:

存储大小:

  • cookie 数据大小不能超过4 k 。(因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据)
  • sessionStorage 和 localStorage 虽然也有存储大小的限制,但比 cookie 大得多,可以达到 5M 或更大。

 

有期时间:

  • localStorage 存储持久数据,持久化的本地存储,保存的数据没有过期时间,直到手动去除。
  • sessionStorage 数据在页面会话结束时会被清除。sessionStorage仅在当前标签页关闭前有效,当该标签页关闭后数据也会被删除。
  • cookie 默认当会话结束(关闭浏览器)的时候即销毁,当然也可以手动设置过期的时间,此时在设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭。

 

作用域:三者的数据共享都遵循同源原则,sessionStorage还限制必须是同一个页面。三者都是在不同浏览器下保存的位置可能不一样,都不能跨浏览器共享。)

  • sessionStorage 仅在当前标签页有效,即使是在同一浏览器中新建一标签页打开同一网站也不会共享。
  • localStorage 在同一浏览器中的同一网站上都是共享的。
  • cookie 可以设置域名及路径,实现同一域名或者目录共享。