版权声明:本文为原创文章,未经博主允许不得转载,欢迎各种交流,共同进步。 https://blog.csdn.net/sinat_15951543/article/details/52701241
1.
用本地存储localstorage存储图片,技巧就是,把图片渲染到canvas中去。存储canvas。
代码如下:
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');
2.判断是否localstorage过期技巧。
代码如下:
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);//设置五分钟,则不过期。