前端开发本地存储之localStorage和sessionStorage

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 = value;
• 读取数据：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 可以设置域名及路径，实现同一域名或者目录共享。