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 数据
- 图片
- 脚本
- 样式文件
使用注意事项
- 使用前要判断浏览器是否支持:
if(window.localStorage){ alert('This browser supports localStorage'); }else{ alert('This browser does NOT support localStorage'); }
- 写数据时候,需要异常处理,避免超出容量报错。
- 避免把敏感的信息存入 LocalStorage。
- 要注意 Key 的唯一性。
- 子域名之间不能共享存储数据,使用 HTML5 的 postmessage 跨域。
使用场景
- 利用本地数据,减少网络传输。
- 弱网络环境下,高延迟、低带宽,尽量把数据本地化。

