HTML5存储方式介绍

HTML5存储方式介绍及小案例

给大家介绍三种HTML5的浏览器端存储方式，以及每种方式具体的实现原理，操作规范以及它们各自的优缺点和适用场景，同时也介绍了一些非主流的存储方式。以便我们可以更好的在今后的业务中灵活运用html5的存储，从而优化业务。

H5之前如何实现存储

• html5之前使用两种存储方式，分别是cookies和userdata。

cookies

• 1.http请求头会带着
• 2.存储大小受限，大概只有4k的容量
• 3.住Domian污染

UserData

• 1.只有IE支持
• 2.XML文件
  所以h5存储就解决了这样几个问题
• 1.4k的存储大小问题
• 2.解决请求头常带存储信息的问题
• 3.解决了关系型存储问题
• 4.跨浏览器问题

H5的几种常见的存储方式

• 1.本地存储（localstorage && sessionstorage）
• 2.离线缓存（application cache）
• 3.IndexdDB 和 Web SQL

localstorage && sessionstorage

• 1.API（localstorage && sessionstorage）
• 2.存储形式（key –》value）
• 3.永不失效，除非手动删除
• 4.每个域名5M
• 注意事项
• 1.使用前判断浏览器是否支持
• 2.写入数据时，需要异常处理，避免容量超出
• 3.敏感信息避免存入localstorage
• 4.key的唯一性
• 使用限制
• 1.存储更新策略，过期控制
• 2.子域名之间不能共享存储数据
• 3.超出存储大小之后如何存储（LRU,FIFO）
• 4.server端如何获取