关闭

localStorage设置过期时间

时间: 2018-11-15阅读: 3038标签: 存储

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


思考点 ​  

从我们接触前端起,第一个熟悉的存储相关的Cookie或者来分析我们生活中密切相关的淘宝、物流、闹钟等事物来说起吧

Cookie从你设置的时候,就会给个时间,不设置默认会话结束就过期; 
淘宝购物 从你下单付款起,就会给这件货物设置一个收货期限时间,过了这个时间自动认为你收货(即订单结束); 
闹钟 你设置的提醒时间,其实也就是它的过期时间; 
再比如与您每天切身相关的产品需求,过完需求,你给出的上线时间,也就是这个需求的过期时间; 
再通俗点讲,您今年的生日过完到明年生日之间也是相当于设置了有效期时间;


以上种种,我们能得出一个结论任何一件事、一个行为动作,都有一个时间、一个节点,甚至我们可以黑localStorage,就是一个完善的API,为什么不能给一个设置过期的机制,因为sessionStorage、Cookie并不能满足我们实际的需求。


代码实现:

<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>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1348

关闭

前端 cookie与本地存储与实践

一个项目考虑缓存和不考虑缓存完全是两个难度,在用户体验上也截然不同。考虑缓存肯定得了解web本地存储与它们的区别和适用场景。正好这次负责一个项目,在做了这个项目后抽空给大家来一次总结,希望能给大家带来帮助。

nodejs如何将获得的数据保存到本地?

nodejs将获得的数据保存到本地可以使用Cookie进行数据保存或使用sessionStorage、localStorage进行数据保存。Cookie这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了。

HTML5中的storage 如何使用

HTML5中,我们常常用到storage,那这个storage到底是什么?有啥用呢?其实,storage是个很简单的东西,只要熟悉JavaScript中对象的童鞋,看完小编本文的分享

HTTP缓存和浏览器的本地存储

http请求做为影响前端性能极为重要的一环,因为请求受网络影响很大,如果网络很慢的情况下,页面很可能会空白很久。对于首次进入网站的用户可能要通过优化接口性能和接口数量来解决。但是,对于重复进入页面的用户,除了浏览器缓存

HTML5新方法:前端存储localStorage的使用总汇

在HTML5中有一个localStorage的新特性,它主要用于本地存储使用,目的是为了解决了cookie存储空间小的问题。本文将讲解:localStorage特点、localStorage的兼容、localStorage的使用等

Cookie、Session与Token

Cookie是一个http请求首部,当服务端响应头上标记着setCookie时,可以设置此cookie到当前域名下;session实际上是一种概念,表示每次会话服务器存储的用户信息

Web 存储技术

第一个Web存储的技术叫做Cookie,它是网站的身份证。是网站为了辨别用户身份,进行session(服务端的session)跟踪而存储在用户本地终端上的数据,也就是说它是存在电脑硬盘上的,一个很小的txt类型的文件

localStorage本地持久化存储API

localStorage, 是一个用来做本地持久化存储的Web Api。 localStorage以键值对的形式存储数据。用法很简单:localStorage是以『源(origin)』为维度进行存储的。

Token ,Cookie和Session的区别

在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解

ES6封装H5本地存储localStorage、sessionStorage

localStorage: 方法存储的数据没有时间限制。sessionStorage: 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!