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

曾经终败给现在 2022-07-16 02:41 175阅读 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 条评论，175人围观）

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

相关阅读

相关 Python常用小技巧总结

Pandas数据分析常用小技巧 -------------------- 数据分析中pandas的小技巧，快速进行数据预处理，欢迎点赞收藏，持续更新，作者：北山啦 -

╰半橙微兮°/ 2022年10月27日 13:48/ 0 赞/ 266 阅读

相关 HTML5常用标签

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

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

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

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

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

相关 HTML5客户端存储Web Storage

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

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

相关 HTML常用标签总结

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

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

相关 Pycharm常用高效技巧总结

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

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

相关 html常用元素总结

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

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

相关 html5中常用实体符号总结(特殊字符)

HTML 中有用的字符实体注释：实体名称对大小写敏感！ <table> <tbody> <tr> <th>显示结果</th> <th>描述<

曾经终败给现在/ 2021年09月18日 15:04/ 0 赞/ 463 阅读

相关 Oracle存储过程常用技巧

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

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

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

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

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