html5 浏览器端存储常用技巧总结

var src="img.jpg";
function set(key){
var img=doucument.createElement('img');

//当图片加载完成的时候，触犯回调函数
img.addEventListener('load',function (){
var imgCanvas = document.createElement('canvas');
imgContext=imgCanvas.getContext('2d');
//确保canvas元素的大小和图片尺寸一致
imgCanvas.width = this.width;
imgCanvas.height = this.height;

// 渲染图片到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);
}

//使用
set('imgtest');
get('imgtest');

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('expries');
}else{
console.log("data="+dataObj.data);
}
}

//使用
set('test','111');
get('test',1000);//过期
get('test',1000*60*5);//设置五分钟，则不过期。