HTML5存储
- H5之前如何实现存储
一共总结四种
第一种、cache俗称缓存(从磁盘或者DB拿出的数据)放到缓存中，可以减少一个磁盘的IO （Input和Output的缩写）也是存在内存中
第二种、磁盘文件：一般把一些图片文件或者是视频存放到磁盘上
第三种、数据库
第四种、内存：频繁使用数据，把要使用的数据存放到内存中，这样调用的话可以增加读取的效率
H5之前
cookies诞生
特点：
- http请求头上会带着
- 大小 4K
- 主Domain污染（存放的域名都放在域名下，这样请求时子域名会携带主域名在http请求头中，这样会造成安全性问题）
UserDate
- 只有IE支持
- XML文件
H5的存储目标
- 解决4K的大小问题
- 解决请求头常带有存储信息的问题
- 解决关系型存储的问题
- 跨浏览器
- H5的集中常见的存储方式
本地存储（ localStorage && sessionStorage）
存储形式：-key-->value
过期
--localStorage 永久存储，永不失效，除非手动删除
--sessionStorage 当前会话或者浏览器关闭自动删除
大小 --5M
localStorage API介绍
-getItem 获取localStorage
-setItem 设置localStorage
-removeItem 移除localStorage
-key 取特定位置
-clear 全部清除
localStorage.setItem('test1','test1')
localStorage.getItem('test1') "test1"
localStorage.key(0)
localStorage.key(1) --"test1"
lcoalStorage.clear()
都可以存储什么数据呢？
数组、json数据、图片、脚本、样式文件
使用注意事项
- 使用前要判断浏览器是否支持
- 写数据时候，需要异常处理，避免超出容量抛错
- 避免把敏感的信息存入localstorage
- key的唯一性 使用限制
- 存储更新策略，过期控制
- 子域名之间不能共享存储数据postmessage
- 超出存储大小之后如何存储（LRU，FIFO）
- server端如何取到 localStorage过期控制
Storage.prototype.setExpire = (key, value, expire) =>
{
let obj = { data: value, time: Date.now(), expire: expire }; //localStorage 设置的值不能为对象,转为json字符串 localStorage.setItem(key, JSON.stringify(obj)); }
Storage.prototype.getExpire = key => {
let val = localStorage.getItem(key);
if (!val)
{ return val; }
val = JSON.parse(val);
if (Date.now() - val.time > val.expire)
{
localStorage.removeItem(key); return null;
}
return val.data;
}
使用场景：
- 利用本地数据，减少网络传输
- 弱网络环境下，高延迟，低带宽，尽量把数据本地化
离线存储（application cache）
定义：它可以让Web应用在离线的情况下继续使用，通过manifest文件知名需要缓存的资源
检测是否在线
navigator.onLine //boolean类型
原理
优势
- 完全离线
- 资源被缓存，加载更快
- 降低server负载
缺陷
- 含有mainifest属性的当前请求页无论如何都会被缓存
- 更新需要建立在manifest文件的更新，文件更新后是需要页面再次刷新的（需要2次刷新才能获取新资源）
- 更新市全局性的，无法单独更新某个文件（无法单点更新）
- 对于链接的参数变化是敏感的，任何一个参数的修改都会被（master）重新缓存（重复缓存含参页面）index.html和index.html?renew=1会被认为是不同文件，分别缓存
适用场景
-
单地址的页面
-
对实时性要求不高的业务
-
离线webapp
-
IndexDB和WebSQL
-
定义：一种能在浏览器中持久的存储结构化数据的数据库，并且为web应用提供了丰富的查询能力
-
浏览器支持
-
chrome 11+、
-
opera 不支持
-
firefox 4+
-
IE 10+
