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教程之倾斜页面
Jan 27 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
钉钉企业内部H5微应用开发详解
May 12 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
新52大事件
2020/03/03 欧美动漫
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
EM算法的python实现的方法步骤
2018/01/02 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
python学生管理系统代码实现
2020/04/05 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
pandas的相关系数与协方差实例
2019/12/27 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
《小鹰学飞》教学反思
2014/04/23 职场文书
应届生找工作求职信
2014/06/24 职场文书
个人年终总结范文
2015/03/09 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android