• javascript之localStorage设置数据实效性


    封装函数实现localStorage存储数据实现数据具有实效性

    1、设置localStorage数据时设置当前时间戳

            /**
             * 设置localStorage数据实效性
            */
            setLocalStorage: function(key, value) {
                const curTime = new Date().getTime();
                localStorage.setItem(key, JSON.stringify({ data: value, time: curTime }));
            },    

    2、获取localStorage数据时判断是否过期

            /**
             * 判断localStorage数据是否过期,过期删除,未过期正常返回 localStorage数据
            */
            getLocalStorage: function(key, exp) {
                const localData = localStorage.getItem(key);
                const localDataObj = JSON.parse(localData);
                const nowTime = new Date().getTime();
                if (nowTime - localDataObj.time > exp) {
                    console.log("数据已过期");
                    // 删除localStorage已过期数据
                    localStorage.removeItem(key);
                    return 'localStorage数据已过期';
                } else {
                    const data = JSON.parse(localDataObj.data);
                    return data;
                }
            },

    3、应用

            let val = '{"name":"setLocalValue"}';
            this.setLocalStorage('info', val);
            setTimeout(()=> {//未过期localStorage
                console.log(this.getLocalStorage("info",1000));//输出 {name: "setLocalValue"}
            },900)
            this.setLocalStorage('info', val);
            setTimeout(()=> {//过期localStorage
                console.log(this.getLocalStorage("info",1000));//localStorage数据已过期
            },2000)
  • 相关阅读:
    React 生命周期
    React 总结
    系统后台设置
    数据库的事务日志已满,起因为"LOG_BACKUP"。
    webpack 打包器
    地图API
    ES6 与 React
    前端流行的技术
    Javascript 函数声明、函数表达式与匿名函数自执行表达式
    Javascript 解读与思想
  • 原文地址:https://www.cnblogs.com/emilyzz/p/14237121.html
Copyright © 2020-2023  润新知