- 服务器端存储
- cache:缓存
- 磁盘文件
- 数据库
- 内存
- cookies
在http请求头上带着,大小4k,会存在安全性问题 - H5存储
(1)本地存储(localstorage和sessionstorage)
配合JSON.stringify()使用
存储形式key->value,5M,子域名间不能共享存储数据
- localstorage(永久存储,永不失效,除非手动删除)
- sessionstorage(新打开一个页面或者关闭浏览器,sessionstorage消失)
常用API
getItem
setItem
removeItem
key
clear
使用场景
利用本地数据,减少网络传输
弱网环境下,高延迟,低带宽,尽量把数据本地化
(2)indexDB(webSQL)
一种能在浏览器中持久的存储结构化数据的数据库,并且为web应用提供了丰富的查询能力
按照域名分配独立空间
(3)html5离线缓存(offline application)
让web应用在离线的情况下继续使用,通过mainifest文件指明需要缓存的资源
检测是否在线 navigator.online
//创建mainifest文件
CHCHE MANIFEST
#version n.n
CACHE:
#需要缓存的文件
NETWORK:
#每次重新拉取的文件
FALLBACK:
#离线状况下代替文件
在html页面中引用mainifest文件
<html mainifest="sample.appcache">
在服务器中添加mime-type text/cache-mainifest
如何更新
如果有修改资源文件,必须通过修改mainifest文件来刷新被缓存的文件列表
优势:
- 完全离线
- 资源被缓存,加载更快
- 降低sever负载
缺陷: - 含有mainfest属性的当前请求页无论如何都会被缓存
- 更新需要建立在mainifest文件的更新,文件更新后需要页面再次刷新(需要两次刷新才能获取资源)
- 更新是全局性的,无法单独更新某个文件
- 对于链接的参数变化是敏感的,任何一个参数的修改都会被重新缓存