HTML5 Web Storage
2017-03-26 本文已影响0人
April_Le
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相似
注意事项
- 无论是
localStorage还是sessionStorage中保存的数据都仅限于该页面的协议，即都遵循同源策略（协议，主机名，端口）。 - 只能存储字符串。其他比如数组，json数据，图片等需要被序列化成字符串后再存储。
- 注意判断浏览器是否支持。
- 避免把敏感的信息存储到本地。
- 注意key的唯一性，重复对一个key赋值会覆盖原来的。
- 子域名之间不能共享存储数据。
- 存入数据的时候需要异常处理（
try catch），避免超出容量报错。超出容量大小后可以使用一些如LRU，FIFO的算法淘汰一些数据。 - 两者都不会被发送到服务器端。
使用场景
- 使用本地数据，减少网络传输。
- 弱网络环境下，高延迟，低带宽，尽量把数据本地化。
