1、html的存储的介质分类:
1.cache 通常我们把它叫做缓存,保存在内存里。
2.磁盘文件存储。
3.数据库存储。
4.内存存储。
2、cookies
h5之前都是用cookies进行存储的,利用cookie的存储特点:
1.http请求头上会带着。
2.大小为4k。
3.主domain污染。
3、目前的几种储存方式:
1.本地存储: localStorage sessionStorage
2.离线缓存: application cache
3.数据库存储:indexedDB 和 WEB SQL
A.本地存储: localStorage sessionStorage
存储形式: key ---> value ;
过期: localStorage 永久存储,永不失效,除非手动删除。
sessionStorage 关闭浏览器,或者重新打开页面,就消失了。
大小: 官方给出的文档是:每个域名可存储 5M。
4、localStorage 和 sessionStorage的讲解
1.以localStorage为例: 其属性包括以下:
getItem(); 获取,
setItem(); 设置,
removeItem();移除,
key(); key值,
clear(); 清除。
2.使用h5本地存储时注意事项:
1)使用前判断浏览器是否支持。
2)写数据时候, 需要异常处理,避免超出容量抛错(5M);
3)避免把敏感的信息存入 localStorage;
4)key的唯一性。
3.以本地图片缓存为例,代码如下:
var src ="1.jpg";
function set(key){ // 此方法只能用于本地图片的路径
var img = document.createElement("img");
// 当图片加载完成的时候触发回调函数;
img.addEventListener("load",function(){
var imgCanvas =document.createElement("canvas");
imgContext = imgCanvas.getContext("2d");
// 确保canvas元素的大小和图片尺寸一致;
imgCanvas.height = this.height;
imgCanvas.width = this.width;
// 渲染图片到canvas中;
imgContext.drawImage(this,0,0,this.width,this.height);
// 用data url 的形式取出
var imgAsDataUrl = imgCanvas.toDataURL("image/png");
// 保存到本地存储中;
try{
localStorage.setItem(key,imgAsDataUrl);
}
catch(e){
console.log("Storage failed:"+e);
}
},false);
img.src = src;
}
function get(key){ // 从本地缓存获取图片并且渲染
var srcStr = localStorage.getItem(key);
var imgObj = document.createElement("img");
imgObj.src = srcStr ;
document.body.appendChild(imgObj);
}
本地存储的使用场景:
1.利用本地数据,减少网络传输。
2.弱网络环境下,高延迟,低宽度,尽量把数据本地化。
4.本地存储的过期控制,代码如下:
function set (key,v){
var curTime = new Date ().getTime();
localStorage.setItem(key,JSON.stringify({data:v,time:curTime}));
}
function get(key, exp){
var data = localStorage.getItem(key);
var dataObj = JSON.parse(data);
if(new Date().getTime() - dataObj.time > exp){
console.log("expires");
} else{
console.log("data="+dataObj.data);
}
}
5、indexedDB database
这是一种能在浏览器中持久化的存储结构化数据的数据库,并且为web应用提供了丰富的查询能力。
6、离线缓存:
1.它是可以让web应用在离线的情况下继续使用,通过manifest文件指明需要缓存的资源。
2.检查是否在线: navigator.onLine // true 在线, false 离线
3.使用方法:
a.在html页面中引入manifest文件 <html manifest="sample.appcache">
b. 在服务器添加 mine-type text/cache-manifest;
4.优点:
1)完全离线。
2)资源被缓存,加载更快。
3)降低server负载。
5.不足:
1)含有manifest属性的当前请求页面无论如何都会被缓存。
2)更新是全局性的,无法单独更新某个文件。
3)对于链接的参数变化是敏感的,任何一个参数的修改都会被重新缓存。
4)更新需要建立在manifest文件的更新,文件更新后是需要页面再次刷新的。
6.使用场景:
1)单地址的页面。
2)对实时性要求不高的业务。
3)离线webapp。