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

一、localStorage 概念

HTML5 web 存储：HTML5 提供了两种在客户端存储数据的新方式：localStorage 和 sessionStorage ，二者都是仅在客户端（即浏览器）中保存，不参与和服务器的通讯。

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

二、localStorage 特征

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

三、sessionStorage

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

四、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) 方法将字符串转换为对象。

五、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 能够设置域名及路径，实现同一域名或者目录共享。三者都是在不一样浏览器下保存的位置可能不同，都不能跨浏览器共享。