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

版权声明：本文为原创文章，未经博主允许不得转载，欢迎各种交流，共同进步。 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);//设置五分钟，则不过期。