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

来源：互联网发布：赵泓霖网络课下载编辑：程序博客网时间：2024/06/05 21:16

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);//设置五分钟，则不过期。

1 0