TS/JS

最新推荐文章于 2024-01-29 17:41:10 发布

bin_123ge

最新推荐文章于 2024-01-29 17:41:10 发布

阅读量179

点赞数

文章标签： javascript 前端开发语言 typescript

本文链接：https://blog.csdn.net/bin_123ge/article/details/130661122

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、JavaScript 封装LocalStorage并支持过期时间
- 1.代码示例
- 2.测试
二、Typescript封装LocalStorage并支持过期时间
- 1、代码示例
- 2、测试
总结

前言

LocalStorage 是浏览器提供的本地存储机制，它可以将数据存储在用户的浏览器中，并且不会随着页面的刷新而丢失。但是默认情况下，LocalStorage 存储的数据是没有过期时间的，所以我们需要对其进行封装，以支持过期时间。

在本文中，我们将使用 JavaScript 和 TypeScript 分别对 LocalStorage 进行封装，并且支持过期时间。下面分别给出示例代码。

一、JavaScript 封装LocalStorage并支持过期时间

1.代码示例

新建 local.js

var Managetime;
(function(Managetime){
    // expire 过期时间   perpetual永久
    Managetime["expire"] = "expire"
    Managetime["perpetual"] = "perpetual"
})(Managetime|| (Managetime = {}))

class Local_Storage{
    // key和value值默认永久存储
    set(key,value,expire = Managetime.perpetual){
        // 对数据进行格式化
        const data = {
            value,
            [Managetime.expire]:expire
        };
        //进行  本地存储
        localStorage.setItem(key,JSON.stringify(data))
    }
    //  get方法
    get(key){
        const value = localStorage.getItem(key)
        // 判断数据是否存在
        if(value){
            const obj = JSON.parse(value)
            const time = new Date().getTime()
            // 判断数据是否 过期 
            if(typeof obj[Managetime.expire] == 'number' && obj[Managetime.expire] < time) {
                //删除 这个key
                this.remove(key)
                return {
                    message: `您的${key}值已经过期`,
                    value:null
                }
            }
            else {
                return {
                    message: '读取数据成功',
                    value: obj.value
                }
            }
        }
        else {
            console.warn('key值无效')
            return { 
                message: `key值无效`,
                value: null
            }
        }

    }
    // 删除某个key值
    remove(key){
        localStorage.removeItem(key)
    }

    // 全部删除
    clear(){
        localStorage.clear()
    }
    
}
export {Local_Storage}

2.测试

代码如下（示例）：

<!DOCTYPE html>
<html lang="zh-CN">
<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 {Local_Storage} from './local.js'
        
        const m1 = new Local_Storage()

        m1.set('m','abc', new Date().getTime() + 2000)

        setInterval(() => {
            const s = m1.get('m')
            console.log(s)
        },500)
    </script>
</body>
</html>

我们定义过期时间是2秒，2秒后数据过期，并且清除localstorage对应的key值
在这里插入图片描述

二、Typescript封装LocalStorage并支持过期时间

1、代码示例


interface LocalData {
    value: any;
    expired: number | null;
  }
 const local = {
    set(key: string, value: any, expired?: number) {
      const data: LocalData = {
        value,
        expired: expired ? new Date().getTime() + expired : null
      };
      localStorage.setItem(key, JSON.stringify(data));
    },
    get(key: string): any {
      const data: LocalData = JSON.parse(localStorage.getItem(key) as string);
      if (data.expired && new Date().getTime() > data.expired) {
        localStorage.removeItem(key);
       console.warn('key值无效');
       
      }
      return data.value;
    }
  };

2、测试

先编译成Js文件，然后加上export default local

var local = {
    set: function (key, value, expired) {
        var data = {
            value: value,
            expired: expired ? new Date().getTime() + expired : null
        };
        localStorage.setItem(key, JSON.stringify(data));
    },
    get: function (key) {
        var data = JSON.parse(localStorage.getItem(key));
        if (data.expired && new Date().getTime() > data.expired) {
            localStorage.removeItem(key);
            console.warn('key值无效');
        }
        return data.value;
    }
};
export default local

<!DOCTYPE html>
<html lang="zh-CN">
<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 local from './test.js'
        // import {Local_Storage} from './local.js'
        const m1 = local
        m1.set('a',234,5000)
        setInterval(() => {
            const a = m1.get('a')
            console.log(a)
        },500)
       
    </script>
</body>
</html>

总结

封装 LocalStorage 并支持过期时间，其实并不难实现，只需要在存储数据时，将其过期时间一并存储在 LocalStorage 中，然后在获取数据时，判断其是否已经过期，如果过期则将其从 LocalStorage 中移除即可。

使用 TypeScript 进行封装时，可以使用接口来规范 LocalData 的类型，以提高代码的可读性和可维护性。

bin_123ge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
TS/JS

LocalStorage 是浏览器提供的本地存储机制，它可以将数据存储在用户的浏览器中，并且不会随着页面的刷新而丢失。但是默认情况下，LocalStorage 存储的数据是没有过期时间的，所以我们需要对其进行封装，以支持过期时间。在本文中，我们将使用 JavaScript 和 TypeScript 分别对 LocalStorage 进行封装，并且支持过期时间。下面分别给出示例代码。
复制链接

扫一扫