JS--localStorage设置过期时间的方案(有示例)

原文网址:JS--localStorage设置过期时间的方案(有示例)_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍如何使用localStorage设置数据的过期时间。

问题描述

localStorage是不支持设置过期时间的,cookie虽然支持设置过期时间但它存的数据量很小。所以在需要存一些带过期时间的数据时,就要手写工具来实现。

思路

存数据时:将value封装到一个对象里,这个对象里额外加一个过期时间。

读数据时:如果当前时间超过了过期时间,则返回null或者空对象;否则返回value。

测试结果

如下几种方案的测试结果都是一样的:

第一次获取时获取到了数据;4秒后数据过期了,再获取时成了null。

方案1:封装为函数

js

javascript 复制代码
/**
 * 写入localStorage
 * @param key    key
 * @param value  value
 * @param expire 超时时间(以秒为单位)
 */
function writeExpire(key, value, expire) {
    let obj = {
        time: new Date().getTime(),
        data: value,
        expire: expire,
    };
    let objStr = JSON.stringify(obj);
    localStorage.setItem(key, objStr);
}

/**
 * 读出localStorage
 */
function readExpire(key) {
    let value = localStorage.getItem(key);
    if (!value || value === "null") {
        return value;
    }

    value = JSON.parse(value);
    if (Date.now() - value.time > value.expire * 1000) {
        localStorage.removeItem(key);
        return null;
    }

    return value.data;
}

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="LocalStorageUtil.js"></script>
</head>
<body>
<script>
    writeExpire("key1", "value1", 2)
    console.log(readExpire("key1"));
    sleep(4000).then(() => {
        console.log(readExpire("key1"));
    })

    function sleep(time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }
</script>
</body>
</html>

方案2:封装为对象

js

javascript 复制代码
export let localStorageUtil = {
    /**
     * 写入localStorage
     * @param key    key
     * @param value  value
     * @param expire 超时时间(以秒为单位)
     */
    writeExpire: function (key, value, expire) {
        let obj = {
            time: new Date().getTime(),
            data: value,
            expire: expire,
        };
        let objStr = JSON.stringify(obj);
        localStorage.setItem(key, objStr);
    },

    /**
     * 读出localStorage
     */
    readExpire: function (key) {
        let value = localStorage.getItem(key);
        if (!value || value === "null") {
            return value;
        }

        value = JSON.parse(value);
        if (Date.now() - value.time > value.expire * 1000) {
            localStorage.removeItem(key);
            return null;
        }

        return value.data;
    }
}

// export default localStorageUtil;

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="module">
    import {localStorageUtil} from "./LocalStorageUtil.js";

    localStorageUtil.writeExpire("key1", "value1", 2)
    console.log(localStorageUtil.readExpire("key1"));
    sleep(4000).then(() => {
        console.log(localStorageUtil.readExpire("key1"));
    })

    function sleep(time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }
</script>
</body>
</html>

方案3:ES5扩展localStorage

js

javascript 复制代码
/**
 * 写入localStorage
 * @param key    key
 * @param value  value
 * @param expire 超时时间(以秒为单位)
 */
Storage.prototype.writeExpire = (key, value, expire) => {
    let obj = {
        data: value,
        time: Date.now(),
        expire: expire
    };
    //localStorage 设置的值不能是对象,转为json字符串
    localStorage.setItem(key, JSON.stringify(obj));
}

/**
 * 读出localStorage
 */
Storage.prototype.readExpire = key => {
    let value = localStorage.getItem(key);
    if (!value || value === "null") {
        return null;
    }

    val = JSON.parse(value);
    if (Date.now() - val.time > val.expire * 1000) {
        localStorage.removeItem(key);
        return null;
    }
    return val.data;
}

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="module">
    import './LocalStorageUtil.js';

    localStorage.writeExpire("key1", "value1", 2)

    console.log(localStorage.readExpire("key1"));
    sleep(4000).then(() => {
        console.log(localStorage.readExpire("key1"));
    })

    function sleep(time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }
</script>
</body>
</html>

方案4:ES6扩展localStorage

js

javascript 复制代码
class LocalStorageUtil {
    constructor() {
        this.storage = window.localStorage;
    }

    /**
     * 写入localStorage
     * @param key    key
     * @param value  value
     * @param expire 超时时间(以秒为单位)
     */
    writeExpire(key, value, expire) {
        let tempObj = {};
        tempObj.key = key;
        tempObj.value = value;
        tempObj.expire = Date.now() + expire * 1000;
        this.storage[key] = JSON.stringify(tempObj);
        return tempObj;
    }

    /**
     * 读出localStorage
     */
    readExpire(key) {
        let value = localStorage.getItem(key);
        if (!value || value === "null") {
            return null;
        }

        let valueObject = JSON.parse(value);
        let expire = valueObject["expire"];
        if (!expire) {
            return valueObject.value;
        }

        if (Date.now() >= expire) {
            this.remove(key);
            return null;
        }

        return valueObject.value
    }

    remove(key) {
        this.storage.removeItem(key);
    }
}

export default LocalStorageUtil;

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="module">
    import LocalStorageUtil from "./LocalStorageUtil.js";

    let localStorageUtil = new LocalStorageUtil();

    localStorageUtil.writeExpire("key1", "value1", 2)

    console.log(localStorageUtil.readExpire("key1"));
    sleep(4000).then(() => {
        console.log(localStorageUtil.readExpire("key1"));
    })

    function sleep(time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }
</script>
</body>
</html>
相关推荐
前端小巷子3 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑6 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了6 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆13 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆18 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan21 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程30 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员