HTML5 Web Storage

localStorage

过期：永久存储，永不失效，除非手动删除
大小：每个来源5MB（大多数浏览器）

浏览器中查看localStorage

常用API：

• 设置：localStorage.setItem(key,value)
• 获取：localStorage.getItem(key)
• 删除：localStorage.removeItem(key)
• 获取第n个key值：localStorage.key(n)，n从0开始

localStorage.key(0); //  "jfVersion"
localStorage.key(1); //  "login-service"

• 清除当前域名下全部数据：localStorage.clear()
• 获取数据数量： localStorage.length
• 获取所有数据：localStorage.valueOf()

sessionStorage

过期：在页面会话结束时被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话，关闭浏览器会结束会话。
大小：根据浏览器不同而不同，一般是2.5MB或5MB
常用API：与localStorage相似

注意事项

1. 无论是 localStorage 还是 sessionStorage 中保存的数据都仅限于该页面的协议，即都遵循同源策略（协议，主机名，端口）。
2. 只能存储字符串。其他比如数组，json数据，图片等需要被序列化成字符串后再存储。
3. 注意判断浏览器是否支持。
4. 避免把敏感的信息存储到本地。
5. 注意key的唯一性，重复对一个key赋值会覆盖原来的。
6. 子域名之间不能共享存储数据。
7. 存入数据的时候需要异常处理（try catch），避免超出容量报错。超出容量大小后可以使用一些如LRU，FIFO的算法淘汰一些数据。
8. 两者都不会被发送到服务器端。

使用场景

1. 使用本地数据，减少网络传输。
2. 弱网络环境下，高延迟，低带宽，尽量把数据本地化。