# 客户端储存历程
远古时期
cookies的用法和缺陷
userdata
HTML5时代
localstorage
application cache 离线缓存
indexedeDB 客户端数据库
# HTML5储存具体介绍
使用规范
每种储存的特点以及解决的问题
在大型站点中的使用
具体业务适用的场景
# HTML5储存（大量案例）
如何实现把图片存在客户端？
如何实现跨域共享客户端缓存？
如何做到真正的离线访问web应用？
如何实现一个客户端的数据库？
待续
# 目录
H5之前如何实现储存
H5的几种常见的存储方式
localstorage && sessionstorage
application cache的介绍和使用
indexDB的介绍和使用
总结
# 关于储存
储存
cache
磁盘文件
数据库
内存
# H5之前
cookies诞生。。。
http请求头上会带着
大小4k
主Domain污染
cookies在浏览器储存形态
UserDate
1.只有IE支持（不符合w3c）
2.XML文件
# H5的储存
目标
解决4k的大小问题
解决请求头常带储存信息的问题
解决关系型储存的问题
跨浏览器
# H5的几种储存
几种储存形式
本地存储 ( localstorage && sessionstorage )
离线缓存 ( application cache )
IndexedDB 和 Web SQL
# H5本地储存
API
localstorage && sessionstorage
存储形式：
key --> value
过期
localstorage永久存储，永不失效，除非手动删除
sessionstorage如果：重新打开页面 或 关闭浏览器，就消失了
大小
官方给出的文档是，每个域名5M
使用方法
localstorage API介绍
getItem 取
setItem 设置
removeItem 移除
key 拿某一个索引
clear 全部删掉
都可以存什么东东
数组
json数据
图片
脚本
样式文件
使用注意事项：
1.使用前要判断浏览器是否支持
2.写数据时候，需要异常处理，避免超出容量抛错
3.避免把敏感的信息存入localstorage
4.key的唯一性
使用限制：
1.存储更新策略，过期控制
2.子域名之间不能共享储存数据
3.超出存储大小之后如何存储 ( LRU , FIFO 算法淘汰旧的数据)
4.server端如何取到
使用场景：
1.利用本地数据，减少网络传输
2.弱网络环境下，高延迟，低宽带，尽量把数据本地化
# Web SQL 和 IndexedDB
indexedDB database
一种能在浏览器中持久地存储结构化数据的 数据库， 并且为web应用提供了丰富的 查询 能力
浏览器
chrome 11+
opera 不支持
firefox 4+
IE 10+
eg:移动端支持的是web sql .不过w3c不再维护web sql
存储结构
IndexedDB是按域名分配独立空间，一个独立域名下可以创建多个数据库，每个数据库可以创建多个对象存储空间（表），一个对象存储空间可以存储多个对象数据
IndexedDB
a.qq.com ->DB_A ->table_A1 ->object_record
->table_A2 ->object_record
b.qq.com ->DB_B
# WebSql 和 IndexedDB
1.增，删，改
2.事务
3.游标
4.索引
# H5离线缓存
什么离线缓存（offline application）
它可以让Web应用在离线的情况下继续使用，通过manifest文件指明需要缓存的资源
检测是否在线
navigator.onLine
原理
* 为多线程
Browser --> 访问离线应用 --> App cache *--> 返回cache中的资源（Browser *）
App cache *--> 检查server上的manifest文件*--> 无更新 --> 结束
检查server上的manifest文件*--> Manifest是否更新 --> 有更新，把manifest里指定的文件全部重新拉取 --> Server --> 更新 app cache (App cache --> 返回 cache 中的资源)
使用
创建manifest文件
CACHE MANIFEST
#version n.n
CACHE:
#需要缓存的文件
/css/sample.css
/images/image.jpg
NETWORK:
#每次重新拉取的文件
* (代表除了cache外从server拉取的文件)
FALLBACK:
# 离线状况下代替文件
/ offline.html
在HTML页面中引用manifest文件
<html manifest="sample.appcache">
在服务器添加mime-type text/cache-manifest
如何更新
如果有修改资源文件，必须通过修改manifest文件来刷新被缓存的文件列表
优势
1.完全离线
2.资源被缓存，加载更快
3.降低server负载
使用缺陷
1.含有manifest属性的当前请求页无论如何都会被缓存
2.更新需要简历在manifest文件的更新，文件更新后是需要页面再次刷新的（需要2次刷新才能获取新资源）
3.更新是全局性的，无法单独更新某个文件（无法单点更新）
4.对于链接的参数变化是敏感的，任何一个参数的修改都会被（master）重新缓存（重复缓存含参页面）index.html和index.htm?renew=1 会被认为是不同文件，分别缓存
试用场景
1.单地址的页面
2.对实时性要求不高的业务
3.离线webapp
# 还有哪些客户端存储
uerDate
64k
只支持IE（5.0---9.0）
google Gears
64SQLite
chrome
12.0后放弃支持
用户授权
##### 总结 #####
H5存储优势
存储空间大
接口丰富
数据相对安全 （把数据存在客户端，没把数据跟URL带上）
关系型 （indexDB）
省流量
H5存储劣势
浏览器兼容
同源 （子域名不能共享）
脚本控制
更新策略