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

曾经终败给现在 2022-07-16 02:41 184阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 git 常用技巧总结

git无法pull仓库refusing to merge unrelated histories git pull remote master --allow-u

偏执的太偏执、/ 2023年05月31日 07:06/ 0 赞/ 19 阅读

相关 HTML5之客户端存储数据

在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储;sessionStorage - 针对一个 sessi

た入场券/ 2022年08月19日 08:38/ 0 赞/ 15 阅读

相关 HTML5常用标签

（1）常用的标签 <h1>~<h6> 表示是一个标题 <p> 段落标签 <hr/> 水平线标签 <br/> 换行标签

红太狼/ 2022年07月29日 11:19/ 0 赞/ 220 阅读

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

1. 用本地存储localstorage存储图片，技巧就是，把图片渲染到canvas中去。存储canvas。代码如下:

曾经终败给现在/ 2022年07月16日 02:41/ 0 赞/ 185 阅读

相关 HTML5客户端存储Web Storage

1. Web Storage 支持情况：IE8以上的主流浏览器都支持Web Storage，IOS平台和Android平台对Web Storage都有很好的支持。 loca

ゝ一世哀愁。/ 2022年05月11日 01:04/ 0 赞/ 381 阅读

相关 HTML常用标签总结

1. p标签paragraph表示文本，段落 2. h标签header，分为h1-h6，h1字体最大，h6字体最小 3. br标签break表示换行，在html里面代码的

野性酷女/ 2022年04月22日 13:42/ 0 赞/ 288 阅读

相关 Pycharm常用高效技巧总结

文章目录 1、PyCharm如何自动生成函数注释 2、pycharm运行程序时在Python console窗口中运行 3、Pyc

￡神魔★判官ぃ/ 2022年04月14日 06:22/ 0 赞/ 442 阅读

相关 html常用元素总结

一.HTML的基本结构一个最基本的HTML文件需要包括以下代码块中的内容: 1.<!DOCTYPE html>：该行与最后一行的</html>构成一对标签；它

叁歲伎倆/ 2022年02月03日 06:41/ 0 赞/ 273 阅读

相关 Oracle存储过程常用技巧

存储过程的结构是非常简单的，我们在这里除了学习存储过程的结构外，还会学习编写存储过程时相关的一些实用的知识。如：游标的处理，异常的处理，集合的选择等等 1.存储过程结构 1

小灰灰/ 2021年08月24日 17:04/ 0 赞/ 370 阅读

相关 H5移动端开发常用技巧

转载自：https://juejin.im/post/5d6e1899e51d453b1e478b29 `viewport`、`强制浏览器全屏`、`IOS的Web APP模式

秒速五厘米/ 2021年08月13日 15:53/ 0 赞/ 507 阅读