HTML5缓存

客户端储存历程

远古时期

• cookies的用法和缺陷
• userdata

HTML时代

• localStorage
• application cache
• indexedDB

1. 使用规范
2. 每种存储的特点以及解决的问题
3. 在大型站点的使用
4. 具体业务适用的场景

HTML5储存

如何实现把图片放在客户端

如何实现跨域请求

如何做到真正的离线访问web应用

如何实现一个客户端的数据库

目录

• H5之前如何实现存储

• H5的几种常见的存储方式

• localStorage && sessionStorage

• application cache 的介绍和应用

• indexDB的介绍和使用场景

关于存储

• cache

• 磁盘文件

• 数据库

• 内存

H5之前

H5之前浏览器端使用cookies去存客户端的一些内容

cookies 的特点

1. http请求头上会带着：一个比较大的缺点，一个http请求要通过三次握手，要去请求回包，整个过程比较长，请求头又带着一堆,会显得非常臃肿

2. 大小4k: 对于每一个域名，浏览器客户端只会存4k大小，不能放更多

3. 主domain污染：每一个子域名都放在主域名下，子域名去访问一条记录或者http请求都会带着主域名，会造成主域名cookies的污染，产生安全隐患

cookies在浏览器存储形态

name value domain path expires size http secure

UserDate

1. 只有IE支持

H5存储

• 解决4k大小问题

• 解决请求头常带存储信息的问题

• 解决关系型存储的问题

• 跨浏览器

H5的存储

• 本地存储 (localStorage && sessionStorage)

• 离线存储 (application cache)

• IndexedDB 和 WebSQL

H5存储优势

1. 存储空间大

2. 接口丰富

3. 数据相对安全

4. 关系型

5. 省流量