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 14 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
HTML基本元素标签介绍
Feb 28 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
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
PHP强制转化的形式整理
2020/05/22 PHP
JavaScript 变量作用域分析
2011/07/04 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
Python实现简易Web爬虫详解
2018/01/03 Python
python re模块的高级用法详解
2018/06/06 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
python requests使用socks5的例子
2019/07/25 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
wxPython实现文本框基础组件
2019/11/18 Python
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
广告学专业毕业生自荐信
2013/09/24 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
医学类个人求职信范文
2014/02/05 职场文书
课程改革实施方案
2014/03/16 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
督导岗位职责
2015/02/04 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书
行政处罚告知书
2015/07/01 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android