Web存储机制——localStorage、sessionStorage

上一篇文章分析了cookie，也提到了使用cookie的缺陷。正因如此，出现了HTML5 的 Web Storage。

出现的原因：就是看不惯数据在客户端和服务器端传来传去的，多耗能啊~~~

Web Storage规范包含了两种对象定义：sessionStorage 和 globalStorage，这两个对象在支持的浏览器中都是以windows对象属性的形式存在的。IE8+

与cookie的比较

存储类型数据	存储大小	有效时间	传输比较
cookie	4KB	默认是窗口或浏览器关闭。设置时间的话就在设置的时间之前一直有效	cookie在浏览器和服务器间来回传递
localStorage	大多数浏览器是5M	数据保留到通过 JavaScript 删除或者是用户清除浏览器缓存	仅本地保存
sessionStorage	因浏览器而异，有的没限制，有的是5M	浏览器关闭之前都有效	仅本地保存

共同点：sessionStorage、localStorage、cookie都是在浏览器端存储的数据。

Storage类型

方法如下：

clear() 删除所有值
getItem(name) 根据指定的名字 name 获取对应的值
key(index) 获得 index 位置处的值的名字
removeItem(name) 删除由 name 指定的名值对
setItem(name, value) 为指定的 name 设置一个对应的值

sessionStorage

sessionStorage是Storage对象的一个实例，所以拥有上面的方法，这也是为什么要先说Storage类型。操作一下：

//使用方法存储数据
sessionStorage.setItem("name", "pyc");
//使用属性存储数据
sessionStorage.book = "JavaScript";

两种方法都可以，通过属性或者是上述的方法。虽然属性和方法都可以，但是还是建议使用方法，以免某个键会意外重写该对象上已存在的成员。

//获取
sessionStorage.getItem("name"); // 'pyc'

sessionStorage应该主要用于仅针对会话的小段数据的存储。如果需要跨越会话存储数据localStorage。

localStorage

localStorage 对象在修订过的 HTML 5 规范中作为持久保存客户端数据的方案取代了~~globalStorage~~。

localStorage也是Storage的实例，所以也可以和上面sessionStorage一样的使用方法。

为了兼容只支持 globalStorage 的浏览器，可以使用以下函数。

扫描二维码关注公众号，回复： 3629205 查看本文章

function getLocalStorage(){ 
    if (typeof localStorage == "object"){ 
         return localStorage; 
     } else if (typeof globalStorage == "object"){ 
         return globalStorage[location.host]; 
     } else { 
         throw new Error("Local storage not available."); 
     } 
}

// 使用方法
let storage = getLocalStorage();

参考资料：

https://blog.csdn.net/viewyu12345/article/details/83055271

http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html