localStorage的过期时间设置的方法?——和派孔明

2023-11-14

我们都知道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);//过期时间为1console.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过期控制运行代码结果之已过期

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

localStorage的过期时间设置的方法?——和派孔明 的相关文章

  • 移动互联网终端的touch事件,touchstart, touchend, touchmove

    前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP 这个页面上肯定是有很多可点击区域的 如果用户触摸到了那些可点击区域怎么办呢 诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏 capacitive
  • 微信H5如何关闭浏览器(如何监听手机的物理返回键)

    一 背景 背景是这样的 该项目进入h5时会通过 location replace xxx 或 location href xxx 跳转到某个地址 该地址会请求获得微信 openId 获取成功后再重定向到h5首页 那么问题来了 重定向会在微信
  • 动态一键换肤实现思路和demo

    前言 浏览器切换样式无非是通过css 总共有以下三种方法 内联style 注入style 注入link 那么我们想要实现一键换肤 那么我们为了剥离干净dom和css 我们只能选择style和link这两种方法 核心思路 在html的head
  • Vue组件按需引入时v-if和v-show的区别

    普通加载 在父组件中先import子组件 然后在components模块中注册子组件 在进 入页面时 会随着加载当前页面的js文件就加载子组件的内容 子组件的内容和父组件的内容在同一个js文件 按需加载 子组件显示的时候 才会去加载子组件的
  • 掘金个人主页头像旋转效果

    img src https sf1 ttcdn tos pstatp com img user avatar d1d3c1b115358ea70f51edcd697b58b2 300x300 image alt 钱端挖掘机师傅的个人资料头像
  • CSS 浏览器缩小之后页面错乱 块不见问题

    问题1 浏览器正常100 显示的时候 今日推荐是看得见的 浏览器缩小 小于100 之后 今日推荐被挤不见了 今日推荐块的DIV的CSS原配置是 today recommend py container width 1200px margin
  • Saas-Export项目之部门数据回显(下拉框和单选框回显)

    Saas Export项目之部门数据回显 之前的经验 做数据回显一般就是在数据修改时需要查询出这条信息 然后再将数据拆分每一项逐一赋值在表单上 通常赋值就行 而且都是input type text这种类型的 所有只要在input里增加val
  • 用实际例子理解回调函数(Calback)

    用实际例子理解回调函数 Calback 在我们编码的过程中 调用和回调几乎无处不在 但是我对回调函数到底是怎样一回事并没有一个真正透彻的理解 最近我查找学习了一些资料 学到了很多 我参考了一些知乎上的分享 很不错 https www zhi
  • border-radius使用详解

    我在使用这个属性的时候 一般都是用在给div或者button加上一点圆角弧度 显得好看一点 或者用来画一个圆形div 用的稍微高级一点的 也就是用来画了一个右半圆来做为侧边栏的展开 收缩按钮 一 border radius使用 border
  • 实现一个函数,判断一个数是不是素数

    include
  • BugkuCTF-WEB题文件上传

    启动场景 发现是文件上传 只能上传图像 不能上传PHP文件 那应该是寻找漏洞上传PHP文件 PHP文件里写入一句话木马 使用burp抓包 不断尝试发现发现需要修改的地方有三个 一个是http head里的Content Type multi
  • elementui 禁止浏览器自动填充用户名密码

    浏览器这功能在登录的时候挺好用的 但是在注册和管理的时候就很难受了 所以 在普通的input上直接off就行了
  • HTML--后台管理系统

    后台管理系统
  • HTML 教程- (HTML5 标准)

    HTML 教程 HTML5 标准 超文本标记语言 英语 HyperText Markup Language 简称 HTML 是一种用于创建网页的标准标记语言 您可以使用 HTML 来建立自己的 WEB 站点 HTML 运行在浏览器上 由浏览
  • align-content 设置多行下的子元素排列方式 代码和图片展示

    align content 适用于 换行 多行 的情况下 单行无效 可以设置上对齐 居中拉伸和平均分配剩余空间等属性值 属性值 flex start 默认值 在侧轴头部开始排列 flex end 在侧轴尾部开始排列 center 在侧轴中间
  • webpack5 配置&使用 文档(大全)

    一 起步 1 基本安装 首先我们创建一个目录 初始化 npm 然后 在本地安装 webpack 接着安装 webpack cli 此工具用于在命令行中运行 webpack mkdir webpack demo cd webpack demo
  • 三维实时重建BundleFusion

    转自 计算机视觉方向简介 深度相机室内实时稠密三维重建 知乎 室内场景的稠密三维重建目前是一个非常热的研究领域 其目的是使用消费级相机 本文特指深度相机 对室内场景进行扫描 自动生成一个精确完整的三维模型 这里所说的室内可以是一个区域 一个
  • html创建添加地图(超简单)

    1 打开百度地图创建平台 百度地图创建平台 2 根据个人需求改就行了 可加标注 3 点击获取代码 复制下来就可以用了 4 个人用的是HBulider 复制到里面可直接用了 如果有文字显示问题 把编码改成utf 8就行了 5 地图控件位置在网
  • Matplotlib快速入门,Python通用的绘图工具库上手

    Matplotlib是一个用于Python编程语言的综合性绘图库 它可以生成各种类型的图表 包括折线图 条形图 散点图 直方图 饼图等 Matplotlib支持多种数据格式 包括NumPy数组 Pandas DataFrame和CSV文件
  • 网页订货系统的诸多优势|企业APP订单管理软件

    1 订单信息 发货信息 账目信息一目了然 生产企业 总代理 和分销商之间可以清楚直观的了解到商品和货款的实时状态 以便高效的订货 发货 进行货款催收以及商品的物流跟踪 2 建立稳固的客户关系 避免客户被竞争对手挖墙脚 有了网上订货系统 企业

随机推荐

  • HTML+CSS实现旋转立方体

    1 六个面叠在一起 2 六个面整体水平垂直居中 3 旋转且位移到对应的六个面上
  • Using DirectSound to Play Audio Stream Data

    Download demo project 30 5 Kb Download source 3 27 Kb Introduction This article with its code shows how to play audio st
  • 两个数组的交集

    摘自 https leetcode cn com problems intersection of two arrays solution duo chong jie fa jie jue 349 liang ge shu zu de ji
  • 极验java源码_jsp滑动拼图极验验证java代码

    运行环境 Myeclipse tomcat6 jdk1 7 最近研究了一个新的验证登录注册的代码 叫做极验验证滑动拼图代码 对它感兴趣是因为在b站看到了 觉得对页面的显示效果特别好 而且也很安全 它是属于行为式验证 简单一滑即可完成拼图 用
  • 计算机网络 第1章 概述 知识小结

    1 电路交换 报文交换和分组交换的主要优缺点 电路交换 优点 通信双方时延小 缺点 网络传输易堵塞 浪费资源且效率低 报文交换 优点 网络信道利用率较高 缺点 延时长 对转发中心要求高 需占用较大存储空间 分组交换 优点 高效 逐段占用 灵
  • ICLR 2023

    PaperWeekly 原创 作者 黄融杰 单位 浙江大学 研究方向 语音翻译 语音到语音翻译 S2ST 对于打破语言壁垒与沟通障碍非常有益 传统的 S2ST 系统通常由语音识别 ASR 机器翻译 MT 和语音合成 TTS 三部分组成 与这
  • NewBing、Andi、Phind、Perplexity 还有国产kuaisou五个AI搜索引擎的介绍和对比

    NewBing NewBing是微软推出的新一代AI搜索引擎 它基于OpenAI的下一代大语言模型 比ChatGPT更强大 专门为搜索定制 NewBing可以理解自然语言的问题 生成简洁 准确 有趣的回答 并提供相关的链接和图片 NewBi
  • docker 启动mysql5.7_在Docker上面安装/启动、运行、挂载MySQL5.7

    下载文档请看 https hub docker com r MysqL MysqL server 一 下载镜像 执行命令 docker pull MysqL MysqL server 5 7 查看命令 docker images 运行Mys
  • 【Java虚拟机】第三章、jvm运行期优化,解释器,编译器(AOT静态编译,JIT动态编译)

    已经第三章了 看了前两章是不是有点懵 或者开始意识到了什么 或者整个串联起来了 回顾一下 第一张主要讲的是jvm怎么创建 第二章讲的是jvm内存结构 和番外篇class加载过程 那么我们再结合这一章解释器和编译器 静态和动态编译 把他们串到
  • 零基础小白入门Python,值得看的几本书籍

    Python目前是全球4大流行编程语言之一 根据今年TIOBE最新排名 Python已超越C 与Java C C 一起成为全球前4大最流行语言 指数变化一直呈现出上升的趋势 TIOBE最新排名 众所周知 Python应用广泛 涵盖后端开发
  • 创业因何维艰,细数可能会死的几个关键节点

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 云视链等几个创业团队被扒皮之后 创业者的品行问题开始被摆到了桌面上来讨论 整个社会开始了一场 创业者 的反思潮 而 霸道总裁 余佳文不合适宜的言论再一次将这股浪潮推向了巅峰
  • 获取磁盘信息函数statvfs()

    对应的头文件 include
  • 【ES】Elasticsearch 简介

    大数据开发经常用到 Elasticesearch 今天做一下介绍 1 Elasticsearch 简介 Elaticsearch 简称为 ES 是一个开源的高扩展的分布式全文检索引擎 特点 近乎实时的存储 检索数据 扩展性好 可以扩展到上百
  • 元组的详细操作

    一 创建元组 name chinese gansu beijing 创建空元组 name 元组中只包含一个元素时 需要在元素后面添加逗号消除歧义 name chinese 二 访问元组 元组可以使用下标索引来访问元组中的值 name chi
  • RK356x Android11更换默认的Launcher

    1 开发环境 ubuntu版本 18 04 开发平台 RK356x Android版本 android11 2 目的 android11 系统自带了一个启动器Launcher3 在android源码路径下的packages apps Lau
  • 机器学习之深度神经网络

    目录 卷积神经网络与全连接神经网络 前向后向传播推导 通用手写体识别模型 人脸识别模型 电影评论情感分析模型 卷积神经网络与全连接神经网络 卷积神经网络 Convolutional Neural Network CNN 和全连接神经网络 F
  • 数据结构——普里姆(Prim)算法

    普里姆算法 Prim算法 图论中的一种算法 可在加权连通图里搜索最小生成树 意即由此算法搜索到的边子集所构成的树中 不但包括了连通图里的所有顶点 且其所有边的权值之和亦为最小 以下是数据结构中关于普里姆算法的操作 编程风格参考严蔚敏版数据结
  • 实施运维企业面试题-5

    NETWORK 1 请描述 TCP IP 协议中主机与主机之间通信的三要素 参考答案 IP 地址 IP address 子网掩码 subnet mask IP 路由 IP router 2 请描述 IP 地址的分类及每一类的范围 参考答案
  • Graphormer复现碎碎念

    一 简介 Graphormer https github com microsoft Graphormerhttps github com microsoft Graphormer 二 安装 使用 install sh安装 前面是pip直接
  • localStorage的过期时间设置的方法?——和派孔明

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