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 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js