localStorage的过期时间设置的方法详解


Posted in HTML / CSS onNovember 26, 2018

我们都知道localStorage不主动删除,永远不会销毁,那么如何设置localStorage的过期时间呢,今天我们来一起尝试一下!

<script type="text/javascript">
    //封装过期控制代码
    function set(key,value){
        var curTime = new Date().getTime();
        localStorage.setItem(key,JSON.stringify({data:value,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('信息已过期');
            //alert("信息已过期")
        }else{
            //console.log("data="+dataObj.data);
            //console.log(JSON.parse(dataObj.data));
            var dataObjDatatoJson = JSON.parse(dataObj.data)
            return dataObjDatatoJson;
        }
    }
 </script>

使用场景:

1.利用本地数据,减少网络传输
2.弱网络环境下,高延迟,低带宽,尽量把数据本地化

使用方法:

<script>
window.onload = function(){
    var Ipt = document.getElementById('input1');
    var value = '{"name":"和派孔明","Age":"18","address":"陆家嘴金融城"}';
    set('information',value);

    Ipt.onclick = function(){
        //var dataObjData=get('information',1000);//过期时间为1秒,正常情况下,你点击的时候已经过期
        //var dataObjData=get('information',1000*60);//过期时间为1分钟
        //var dataObjData=get('information',1000*60*60);//过期时间为1小时
        //var Obj=get('information',1000*60*60*24);//过期时间为24小时
        var dataObjData=get('information',1000*60*60*24*7);//过期时间为1周
        console.log(dataObjData || null);
            if (dataObjData!="" && dataObjData!=null) {
                    console.log("姓名:"+dataObjData.name);
                    console.log("年龄:"+dataObjData.Age );
                    console.log("地址:"+dataObjData.Age );
            }else{
                alert("获取的信息已经过期");
            }   
    }
}
</script>

localStorage过期控制运行代码结果之未过期

localStorage的过期时间设置的方法详解

localStorage过期控制运行代码结果之已过期

localStorage的过期时间设置的方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 #HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 #HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 #HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 #HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 #HTML / CSS
HTML5之消息通知的使用(Web Notification)
Oct 30 #HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 #HTML / CSS
You might like
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
深入解析php之sphinx
2013/05/15 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PDO::rollBack讲解
2019/01/29 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
Javascript实现滑块滑动改变值的实现代码
2013/04/12 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
浅谈vue权限管理实现及流程
2020/04/23 Javascript
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
python3中zip()函数使用详解
2018/06/29 Python
Python中os模块功能与用法详解
2020/02/26 Python
python如何求圆的面积
2020/07/01 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
开业庆典策划方案
2014/02/18 职场文书
集体婚礼策划方案
2014/02/22 职场文书
关于学习的演讲稿
2014/05/10 职场文书
2014年党支部学习材料
2014/05/19 职场文书
有关环保的标语
2014/06/13 职场文书
大四毕业生自荐书
2014/07/05 职场文书
2014年班主任工作总结
2014/11/08 职场文书
小浪底导游词
2015/02/12 职场文书
史上最牛的辞职信
2015/02/28 职场文书
观后感开头
2015/06/19 职场文书
数学备课组工作总结
2015/08/12 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
美甲店的创业计划书模板
2019/08/23 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang