HTML5 离线存储

本章介绍一下 HTML5 新增的离线存储特性 Localstorage,主要包括 Localstorage 的发展史、兼容性、优缺点以及使用场景。

说到 Localstorage,为什么要使用 Localstorage 呢?

因为开发程序当然就要存储数据了,但是 Web 开发场景比较特殊,数据正常情况下是要通过 HTTP 协议发送给服务器端,存储在服务器上,但是呢,如果所有数据都存到服务器一方面会浪费服务器资源,另一方面也会降低网页响应速度,所以设计网页时会抽取一些不太重要的或者临时性的数据使用离线存储方式放在浏览器上。

总的来说,Localstorage 是一个简单的离线存储技术,通过官方提供的增删改查的 API 可以方便的操作它,需要考虑的难点是每个浏览器的容量限制,使用时做好容错即可。

1. 离线存储发展史

在早期的互联网发展中,浏览器制定了不同的标准用于存储离线数据,其中比较出名的有微软 IE 浏览器的 userData(单个页面可存储 64 kb)、Adobe 的 flash6 中的 flash-cookies(允许存储 100kb)、flash8 中的 externalinterface、Google 的 gears,不幸的是这些技术没有统一的标准,而且只适用于单一的浏览器,不能跨平台,所以没有收录在 HTML 标准中。HTML5 之前,Cookie 是唯一在 HTML 标准中用于离线存储的技术,但是 Cookie 有一些不太友好的特征限制了它的应用场景:

  • Cookie 会被附加在 HTTP 协议中,每次请求都会被发送到服务器端,增加了不必要的流量损耗
  • Cookie 大小限制在 4kb 左右(不同的浏览器有一些区别),对于一些复杂的业务场景可能不够

这两个缺点在 Localstorage 中得到了有效的解决,下面我们就开始学习 Localstorage。

2. 兼容性

截止目前为止,已经有大部分浏览器已经支持 Localstorage,包括 IE8。

具体浏览器是否支持 Localstorage 可以通过简单的 JavaScript 代码判断。

实例演示
预览 复制