html5之前：
1.cookies诞生
- http请求头里会带着
- 大小4K
- 主Domain污染（子域名的cookies会带上主域名里设置的cookies）
百度首页cookies：（cookies在浏览器存储形态）
2.UserData
- 只有IE支持
- 最终存储放在一个XML文件里
html5存储
1.诞生的目的
- 解决4k的大小问题
- 解决请求头常带存储信息的问题
- 解决关系型存储的问题
- 跨浏览器
2.html5的几种存储
- 本地存储(localstorage && sessionstorage)
- 离线缓存(application cache)
- IndexedDB和Web SQL
3.本地存储(localstorage && sessionstorage)
- 存储形式：key-value
- 过期时间：
- localstorage：永久存储，永不失效，除非手动删除；
- sessionstorage：会话结束（重新打开一个页面）或浏览器关闭时删除
- 大小：官方文档给出的是每个域名5M
- 使用方法（API）
- getItem
- setItem
- removeItem
- key（指定索引的key值）
- clear（全部删除）
- 可以存什么东西？（只要能序列化成字符串就都可以存储）
- 数组/json数据/图片/脚本/样式文件
- 存图片
-
- 取图片
-
- 使用注意事项
- 使用前要判断浏览器是否支持
- 写数据时，需要异常处理，避免超出容量抛错
- 避免存入敏感信息
- key的唯一性
- 使用限制
- 存储更新策略，过期控制
-
- 子域名之间不能共享存储数据
- 超出存储大小之后如何存储（LRU，FIFO）
- server端如何取到（通过在请求后面添加参数传给服务端）
- 使用场景
- 利用本地数据，减少网络传输
- 弱网络环境下，高延迟，低宽带，尽量把数据本地化
4.IndexedDB（先放一放）
5.html5的离线缓存
- 什么是离线缓存？
- 可以让web应用在离线情况下继续使用，通过manifest文件指明需要缓存的资源
- 检测是否在线
- navigator.onLine
- 原理
- 缺陷
- 如果文件更新了，第一次访问的还是旧文件，只有第二次才能访问到更新后的文件
- 如果只有一个文件更新，也会全部重新拉取
- 对链接的参数变化是敏感的，任何一个参数的修改都会被（master）重新缓存（重复缓存含参页面）index.html和index.html?renew=1会被认为是不同文件，分别缓存
- 优势
- 完全离线
- 资源被缓存，加载更快
- 降低server负载
- 使用
- 创建manifest文件
-
- 在html页面中引用manifest文件
- <html manifest="**.appcache">
- 在服务器添加mime-type text/cache-manifest
- 试用场景
- 单地址的页面
- 对实时性要求不高的业务
- 离线webapp
812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
