本地存储localStorage设置过期时间示例详解

目录
  • 思考
  • 实现思路
  • 代码实现
  • 代码测试

思考

在我们使用cookie的时候是可以设置有效期的，但是localStorage本身是没有该机制的，只能人为的手动删除，否则会一直存放在浏览器当中，可不可以跟cookie一样设置一个有效期。如果一直存放在浏览器又感觉有点浪费，那我们可以把localStorage进行二次封装实现该方案。

实现思路

在存储的时候设置一个过期时间，并且存储的数据进行格式化方便统一校验，在读取的时候获取当前时间进行判断是否过期，如果过期进行删除即可。

代码实现

目录结构

enum ts 定义枚举

//字典 Dictionaries    expire过期时间key    permanent永久不过期
export enum Dictionaries {
    expire = '__expire__',
    permanent = 'permanent'
}

type ts 定义类型

import { Dictionaries } from "../enum"
export type Key = string //key类型
export type expire = Dictionaries.permanent | number //有效期类型
export interface Data<T> {  //格式化data类型
    value: T
    [Dictionaries.expire]: Dictionaries.expire | number
}
export interface Result<T> { //返回值类型
    message: string,
    value: T | null
}
export interface StorageCls { //class方法约束
    set: <T>(key: Key, value: T, expire: expire) => void
    get: <T>(key: Key) => Result<T | null>
    remove: (key: Key) => void
    clear: () => void
}

index.ts 主要逻辑实现

import { StorageCls, Key, expire, Data,Result } from "./type";
import { Dictionaries } from "./enum";
export class Storage implements StorageCls {
    //存储接受 key value 和过期时间 默认永久
    public set<T = any>(key: Key, value: T, expire: expire = Dictionaries.permanent) {
    //格式化数据
        const data = {
            value,
            [Dictionaries.expire]: expire
        }
        //存进去
        localStorage.setItem(key, JSON.stringify(data))
    }
    public get<T = any>(key: Key):Result<T | null> {
        const value = localStorage.getItem(key)
        //读出来的数据是否有效
        if (value) {
            const obj: Data<T> = JSON.parse(value)
            const now = new Date().getTime()
            //有效并且是数组类型 并且过期了 进行删除和提示
            if (typeof obj[Dictionaries.expire] == 'number' && obj[Dictionaries.expire] < now) {
                  this.remove(key)
                  return {
                     message:`您的${key}已过期`,
                     value:null
                  }
            }else{
            //否则成功返回
                return {
                    message:"成功读取",
                    value:obj.value
                }
            }
        } else {
           //否则key值无效
            console.warn('key值无效')
            return {
                message:`key值无效`,
                value:null
             }
        }
    }
    //删除某一项
    public remove(key:Key) {
        localStorage.removeItem(key)
    }
    //清空所有值
    public clear() {
       localStorage.clear()
    }
}

rollup.js 简易打包暂时没有写的很复杂 所用到的依赖 rollup rollup-plugin-typescript2 typescript

import ts from 'rollup-plugin-typescript2'
import path from 'path'
export default {
     input:'./src/index.ts',
     output:{
         file:path.resolve(__dirname,'./dist/index.js')
     },
     plugins:[
        ts()
     ]
}

代码测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module">
        import { Storage } from './dist/index.js'
        const sl = new Storage()
        //五秒后过期
        sl.set('a', 123, new Date().getTime() + 5000)
        setInterval(() => {
            const a = sl.get('a')
            console.log(a)
        },500)
    </script>
</body>
</html>

测试五秒后过期增加计时器观察值

过期之后 成功删除 测试成功

以上就是本地存储localStorage设置过期时间示例详解的详细内容，更多关于本地存储localStorage设置过期时间的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 使用localStorage替代cookie做本地存储

    使用localStorage替代cookie做本地存储

    因为cookie存储有限,加上cookie每次都要上传到服务器,浪费了带宽不说,而且伤害了人民群众的感情. 基于HTML5的localStorage可能能给你带的新的希望,而且最大支持不超过5MB的数据存储.可惜的是,IE方面只支持IE8以上的版本. 我花了一点时间就最近浏览记录的存储简单的写了一个javascript代码来做演示 late = { storage : {}, isinit : 0, maxnum : 10, key : 'vestigial', _init:function()

  • JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    目录 前提知识 范例 示例1:将键值对提供给本地存储 示例2: 本地存储中设置键值对 示例3: 获取空值 示例 4:将数组存储在本地存储中 示例 5:从本地存储中获取数组 示例 6:从本地存储中获取数组? 示例 7:清除本地存储 示例 8:仅从本地存储中删除 Name1 键值对 会话存储 总结 我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识. 前提知识 请按照我以下的步骤来: 1.在任

  • 给localStorage设置一个过期时间的方法分享

    思考点 在 web 开发中,我们知道 cookie.session.localStorage都可以保存用户的数据,cookie的 domain.path 限制了 cookie 的跨域, 有数量和大小的限制,可以设置有效时间. session是后台在浏览器注入一个设置了 httponly 的不可读取的 cookie , session data由后台保存在数据库或者内存中,在web中,session 是靠 cookie 作为唯一标示来实现的,也可以设置过期时间. localStorage 是 H5

  • localStorage过期时间设置的几种方法

    目录 问题描述 1.初级解法 2.中级解法 3.高级解法 4.骨灰级解法 聊到 localStorage 想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getItem, setItem, removeItem, clear 这几个 API 轻松的对存储在浏览器本地的数据进行**「读,写, 删」操作, 但是相比于 cookie, localStorage 唯一美中不足的就是「不能设置每一个键的过期时间」**. localStorage 属性允许我们访问一个 Document 源(origi

  • localStorage设置有效期和过期时间的简单方法

    目录 前言 实现思路 实现代码 总结 前言 总所周知localStorage默认是不会过期的,也没有可设置过期的api,如果要实现过期清除就需要自己实现一个api 实现思路 在Storage原型上新增两个方法setCanExpireLocal,getCanExpireLocal,分别用于设置和获取值 实现过期功能至少需要三个时间,存值时间,取值时间,有效时间 存取时间戳都是在函数被调用时在函数内通过Date.now()生成 有效时间在存值的时候传入 如果存值时间戳加上有效时间小于当前时间戳说明还

  • 本地存储localStorage设置过期时间示例详解

    目录 思考 实现思路 代码实现 代码测试 思考 在我们使用cookie的时候是可以设置有效期的,但是localStorage本身是没有该机制的,只能人为的手动删除,否则会一直存放在浏览器当中,可不可以跟cookie一样设置一个有效期.如果一直存放在浏览器又感觉有点浪费,那我们可以把localStorage进行二次封装实现该方案. 实现思路 在存储的时候设置一个过期时间,并且存储的数据进行格式化方便统一校验,在读取的时候获取当前时间进行判断是否过期,如果过期进行删除即可. 代码实现 目录结构 en

  • C#获取本地IP的四种方式示例详解

    1.第一种方式 采用System.Net.Dns的GetHostAddress的方式,具体请看代码: /// <summary> /// 网络不通畅可以获取 /// 不过能获取到具体的IP /// </summary> /// <returns></returns> public static List<IPAddress> GetByGetHostAddresses() { try { IPAddress[] adds = Dns.GetHos

  • Redis中键值过期操作示例详解

    Redis中键值过期操作示例详解

    1.过期设置 Redis 中设置过期时间主要通过以下四种方式: expire key seconds:设置 key 在 n 秒后过期: pexpire key milliseconds:设置 key 在 n 毫秒后过期: expireat key timestamp:设置 key 在某个时间戳(精确到秒)之后过期: pexpireat key millisecondsTimestamp:设置 key 在某个时间戳(精确到毫秒)之后过期: 下面分别来看以上这些命令的具体实现. 1)expire:N

  • 微信小程序 本地存储及登录页面处理实例详解

    微信小程序 本地存储及登录页面处理实例详解

    实例内容 登陆界面 处理登陆表单数据 处理登陆表单数据(异步) 清除本地数据 登录界面: 在app.json中添加登陆页面pages/login/login,并设置为入口. 保存后,自动生成相关文件(挺方便的). 修改视图文件login.wxml <!--pages/login/login.wxml--> <view class="container"> <form bindsubmit="formSubmit"> <vie

  • ASP.NET Core中间件计算Http请求时间示例详解

    ASP.NET Core通过RequestDelegate这个委托类型来定义中间件 public delegate Task RequestDelegate(HttpContext context); 可将一个单独的请求委托并行指定为匿名方法(称为并行中间件),或在类中对其进行定义.可通过Use,或在Middleware类中配置要传递给委托执行的方法(参数类型HttpContext,返回值类型Task). public static IApplicationBuilder Use(this IA

  • JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

    本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能.分享给大家供大家参考,具体如下: 源码引用的js.jquery都是在线的,代码拷到本地就能运行 登录: <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, m

  • SpringBoot集成本地缓存性能之王Caffeine示例详解

    SpringBoot集成本地缓存性能之王Caffeine示例详解

    目录 引言 Spring Cache 是什么 集成 Caffeine 核心原理 引言 使用缓存的目的就是提高性能,今天码哥带大家实践运用 spring-boot-starter-cache 抽象的缓存组件去集成本地缓存性能之王 Caffeine. 大家需要注意的是:in-memeory 缓存只适合在单体应用,不适合与分布式环境. 分布式环境的情况下需要将缓存修改同步到每个节点,需要一个同步机制保证每个节点缓存数据最终一致. Spring Cache 是什么 不使用 Spring Cache 抽象

  • Java缓存Map设置过期时间实现解析

    这篇文章主要介绍了Java缓存Map设置过期时间实现解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 前言 最近项目需求需要一个类似于redis可以设置过期时间的K,V存储方式.项目前期暂时不引进redis,暂时用java内存代替. 解决方案 1. ExpiringMap 功能简介 : 1.可设置Map中的Entry在一段时间后自动过期. 2.可设置Map最大容纳值,当到达Maximum size后,再次插入值会导致Map中的第一个值过期.

  • Java如何设置过期时间的map的几种方法

    目录 一.技术背景 二.技术效果 三.ExpiringMap 3.1功能简介 3.2源码 3.3示例 四.LoadingCache 4.1功能简介 4.2示例 4.3移除机制 4.4其他 五.HashMap的封装 一.技术背景 在实际的项目开发中,我们经常会使用到缓存中间件(如redis.MemCache等)来帮助我们提高系统的可用性和健壮性. 但是很多时候如果项目比较简单,就没有必要为了使用缓存而专门引入Redis等等中间件来加重系统的复杂性.那么Java本身有没有好用的轻量级的缓存组件呢.

随机推荐