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将你的设计带入下个高度
Aug 08 HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
python 平衡二叉树实现代码示例
2018/07/07 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
python opencv摄像头的简单应用
2019/06/06 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
用Python制作音乐海报
2021/01/26 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
中东奢侈品市场:Coveti
2019/05/12 全球购物
客服专员岗位职责范本
2013/11/29 职场文书
打架检讨书500字
2014/01/29 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
社区戒毒工作方案
2014/06/04 职场文书
工程承包协议书范本
2014/09/29 职场文书
一封真诚的自荐信帮你赢得机会
2019/05/07 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
如何做好员工培训计划?
2019/07/09 职场文书