Web 存储 —— 关于Cookie, LocalStorage 与 SessionStorage

学习
阅读次数：次

前言

做项目是会有各种需求，有时候希望通过一些手段来持久化的存储一些有用的数据。一般将这项任务交给了服务器端的数据库或者浏览器端的cookie。随着HTML5的出现，web开发又有了新选择：Web Storage。下面就来说说cookie与web Storage。

正文

Cookie是小甜饼的意思。cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

Web Storage

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

SessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此SessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

LocalStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

Web Storage浏览器兼容性

特性/浏览器 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
localStorage 4 3.5 8 10.50 4
sessionStorage 5 2 8 10.50 4

localStorage和sessionStorage操作

LocalStorage和SessionStorage都具有相同的操作方法，例如setItem、getItem、removeItem和clear等。

setItem
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：

1
2
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "123");

getItem
用途：获取指定key本地存储的值
用法：.getItem( key)
代码示例：

1
2
sessionStorage.getItem("key");
localStorage.getItem("site");

removeItem
用途：删除指定key本地存储的值
用法：.removeItem( key)
代码示例：

1
2
sessionStorage.removeItem("key");
localStorage.removeItem("site");

clear
用途：清除所有的key/value
用法：.clear()
代码示例：

1
2
sessionStorage.clear();
localStorage.clear();

点操作和[ ]
web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码： 

1
2
3
4
5
var storage = window.localStorage; 
storage.key1 = "hello"; 
storage["key2"] = "world"; 
console.log(storage.key1); 
console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：

1
2
3
4
5
6
var storage = window.localStorage; 
for (var i=0, len = storage.length; i  <  len; i++){ 
    var key = storage.key(i);     
    var value = storage.getItem(key);     
    console.log(key + "=" + value); 
}

三者的对比

特性 Cookie LocalStorage SessionStorage
数据的有效期 可设置失效时间，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除
可存储数据大小 4K左右 5M左右 5M左右
是否需要与服务端通信 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的通信 仅在客户端（即浏览器）中保存，不参与和服务器的通信

除了上面以外，LocalStorage与SessionStorage拥有setItem,getItem,removeItem,clear等方法，操作起来比较方便，而Cookie需要前端开发者自己封装setCookie，getCookie。

应用场景

Cookie比较常见的应用是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。
LocalStorage可以用来保存用户在电商网站的购物车信息，也可以保存一些HTML5游戏的本地数据。

安全性

使用Cookie、localStorage 和 sessionStorage的时候，需要时刻注意是否有代码存在 XSS 注入的风险。如果你的网站中有 XSS 的风险，它们就能对你的 localStorage 随意更改。所以千万不要用它们存储你系统中的敏感数据。

参考资料

HTMl5的sessionStorage和localStorage
使用 Web Storage API
详说 Cookie, LocalStorage 与 SessionStorage