HTML5存储
介绍
存储方式：
cookies缺点
http请求头会带着
4K大小
主域名污染
H5存储
存储方式
localStorage && sessionStorage
application cache
indexDB
目标
解决4K大小问题
解决请求头带存储信息问题
解决关系型存储
跨浏览器
存储环境：
硬件
磁盘，内存
软件
cache，数据库，磁盘文件
H5存储优劣：
优势
大 存储空间大
快 离线缓存→省流量
强 接口丰富，关系型数据库
劣势
脚本控制 只能通过post/get方式
更新策略 需要业务专门处理
本地存储
通用：
存储形式
key -> value
过期
localStorage 永久，除非手动删除
sessionStorage 关闭浏览器消失，或重打开
大小
每域名5M
使用：
API
设置 setItem
获取 getItem，key
删除 removeItem，clear
问题
过期控制 业务代码解决
子域名共享数据 使用postMessage
超出存储大小 使用算法优化（LRU、FIFO）
server端如何取到 使用post或get参数
使用场景
减少网络传输
弱网络更明显
注意事项：
检查浏览器是否支持
利用异常处理，避免超容量报错
key的唯一性
web数据库
Web SQL：
W3C不再维护
IndexDB：
是什么
浏览器持久存储数据
结构化数据
提供丰富的查询能力
浏览器支持
IE10+
firefox
chrome
存储结构
域名→库→表→记录
离线缓存
是什么：
使web应用在离线下使用
通过manifest指明缓存资源
使用场景
单地址页面
离线webapp
实时性要求不高的业务
使用：
原理
浏览器→访问App cache→返回cache资源
App cache→检查manifest→有更新→重新拉取服务端文件→更新缓存
App cache→检查manifest→无更新→结束
三方配合
manifest文件
头声明 CACHE MANIFEST
版本号 version n.n
设置缓存文件 CACHE
不缓存文件 NETWORK
html
1 | <html manifest="sample.appcache"> |
服务器
1 | mime-type text/cache-manifest |
更新和停用
停用 修改manifest文件名
更新 修改manifest 文件
优劣：
优势
完全离线
加载更快，降低服务端负载
劣势
2次刷新生效 通过js reroad解决
更新是全局性的，无法单独更新某文件
链接参数变化敏感
