HTML5 存储技术详解：LocalStorage 与 SessionStorage

HTML5 存储与以往方式的区别

解决 Cookie 只有 4KB 大小的问题，避免请求头常带存储信息，解决关系型存储的局限，并实现跨浏览器兼容。

H5 的几种存储形式

• 本地存储 (LocalStorage & SessionStorage)
• 离线缓存 (Application Cache)
• IndexedDB 和 Web SQL

API 介绍 (LocalStorage & SessionStorage)

存储形式为 Key-Value。 过期策略：永久存储，永不失效，除非手动删除。 大小限制：官方文档建议每个域名约 5MB。

使用方法

LocalStorage API 介绍：

• getItem：获取数据
• setItem：设置数据
• removeItem：移除数据
• key：取得某个位置上的 key 值（索引）
• clear：全部删除

可存储的数据类型

H5 本地储存可以存什么（全部序列转换成字符串形式）：

• 数组
• JSON 数据
• 图片
• 脚本
• 样式文件

使用注意事项

1. 使用前要判断浏览器是否支持：

if(window.localStorage){ alert('This browser supports localStorage'); }else{ alert('This browser does NOT support localStorage'); }

2. 写数据时候，需要异常处理，避免超出容量报错。
3. 避免把敏感的信息存入 LocalStorage。
4. 要注意 Key 的唯一性。
5. 子域名之间不能共享存储数据，使用 HTML5 的 postmessage 跨域。

使用场景

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