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端如何获取