前端开发本地存储之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数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

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

• 数据有效期不同：sessionStorage仅在当前标签页关闭前有效，当该标签页关闭后数据也会被删除；localStorage：持久化的本地存储，保存的数据没有过期时间，直到手动去除；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

• 作用域不同：sessionStorage 仅在当前标签页有效，即使是在同一浏览器中新建一标签页打开同一网站也不会共享；localStorage 在同一浏览器中的同一网站上都是共享的；cookie 可以设置域名及路径，实现同一域名或者目录共享。三者都是在不同浏览器下保存的位置可能不一样，都不能跨浏览器共享。