- HTML5之前的存储方式cookie
- cookie缺陷
- HTML5存储优势
- html5本地存储
- localstorage
- indexedDB database
- H5离线缓存offline application
HTML5之前的存储方式cookie：
cookie缺陷：
- 每次的http请求都会带上cookie信息，增加请求耗时
- 大小为4k的限制
- 主domain污染
HTML5存储优势
- 解决存储大小4k限制
- 解决请求头常带存储信息的问题
- 解决关系型存储的问题
- 跨浏览器
html5本地存储
localstorage&sessionstorage
- 存储形式：key-value
- 过期：永久存储，永不失效，除非手动删除
- 大小：官方文档给出的是每个域名是5M
localstorage
- 常用API:getItem,setItem,removeItem,key,clear
- 可存储的内容包括数组，json，图片，脚本，样式文件等可被序列化成字符串的数据
- 注意事项：
1、使用前要判断浏览器是否支持（可通过调用api并捕获异常判断）
2、写数据时，需要异常处理，避免超出容量抛错
3、避免把敏感信息存入localstorage
4、key的唯一性
使用时限制:
存储更新策略，过期控制需要自定义解决
子域名之间不能共享存储数据
超出存储大小之后如何存储（使用LRU、FIFO算法存储）
server端如何取到（使用postmessage等方式）
使用场景：
1.利用本地数据，减少网络传输
2.弱网络环境，高延迟，低宽带，尽量把数据本地化
indexedDB database
一种能在浏览器中持久化的存储结构化数据的数据库，并且为web应用提供丰富的查询能力
注：主流浏览器端如chrom11+,firefox4+,ie10+基本支持,移动端则支持较弱且主要还是支持webSQL。
存储结构
IndexedDB是按照域名分配独立空间，一个独立域名下可以创建多个数据库，每个数据库可以创建多个对象存储空间（表），一个对象存储空间可以存储多个数据对象
H5离线缓存（offline application）
它可以让web应用在离线的情况下继续使用，通过manifest文件指明缓存的资源
注：检测是否在线：navigator.online
离线缓存原理图
原理图中可以看出manifest文件修改后只是去进行app cache(缓存)的更新，而不是直接加载新的缓存，获取到的缓存依旧是更新manifest文件之前指定的缓存。导致的缺陷：
1、用户只有在第二次获取缓存信息时才能获得最新的缓存
2、当只更新其中一个文件时，修改manifest文件，依旧拉取所有指定文件
manifest文件格式
CACHE MANIFEST
#version n.n
#代表manifest文件的版本，当需要更新manifest文件时需要修改version
CACHE:
#需要缓存的文件
/css/sample.css
/images/image.jpg
NETWORK:
#每次重新拉取的文件
# ‘*’为通配符
FALLBACK:
#离线状况下代替文件
/offline.html如何引用manifest
第一步、在HTML页面引入manifest文件
注：”sample.appcache”这里的路径写的是相对路径和html文件在同一个目录下
第二步、服务器添加mime-type text/cache-mainfest
如何移除manifest引用
第一步、移除HTML页面关于manifest的声明
第二步、修改manifest文件的文件名
使用manifest离线缓存的优势
1、完全离线
2、资源被缓存，加载更快
3、降低server负载
使用manifest离线缓存的优势
1、含有manifest属性的请求页无论如何都会被缓存
2、更新需要建立在manifest文件的更新，文件更新后是需要再次刷新的（需要2次刷新才能获取新资源）
3、更新是全局的，无法单独更新某个文件（无法单点更新）
4、对于链接的参数变化是敏感的，任何一个参数的修改都会被（master）重新缓存（重复缓存含参数页面）index.html和index.html?renew=1会被认为是不同文件，分别缓存
