zoukankan      html  css  js  c++  java
  • localStorage设置过期时间

    export const storage = {
        /*
        * set 存储方法
        * @ param {String}     key 键
        * @ param {String}     value 值,
        * @ param {String}     expired 过期时间,以分钟为单位,非必须
        */
        set(key, val, expired) {
            if (typeof val !== 'string') {
                val = JSON.stringify(val);
            }
            window.localStorage.setItem(key, val);
            if (expired) {
                window.localStorage.setItem(`${key}__expires__`, `${Date.now() + 1000 * 60 * expired}`);
            }
        },
        /*
       * get 获取方法
       * @ param {String}     key 键
       * @ param {String}     expired 存储时为非必须字段,所以有可能取不到,默认为 Date.now+1
       */
        get(key) {
            const expired = window.localStorage.getItem(`${key}__expires__`) || Date.now + 1;
            const now = Date.now();
    
            if (now >= expired) {
                window.localStorage.removeItem(key);
                return;
            }
            let val = window.localStorage.getItem(key);
            try {
                val = JSON.parse(val);
            } catch (e) {
                console.log(`${val} Unexpected token H in JSON at position 0`);
            }
            return val;
        },
        clear() {
            window.localStorage.clear();
        },
        /*
        * remove 移除
        * */
        remove(key) {
            if (window.localStorage.getItem(`${key}__expires__`)) {
                window.localStorage.removeItem(`${key}__expires__`);
            }
    
            if (window.localStorage.getItem(key)) {
                window.localStorage.removeItem(key);
            }
        }
    };

    在调用get方法时会进行时间范围校验:

          let arr = [
            {
              id: 0,
              name: "小明",
            },
            {
              id: 1,
              name: "小华",
            },
          ];
          storage.set("list", arr, 0.1);
          let result = storage.get("list");
          console.log(result);
  • 相关阅读:
    .net Core 使用AutoMapper
    文件批量生成IO流读写
    .net Core数据的幕等性
    .net core 拦截器的使用
    墙上你APP设计与实现
    H5 App实现热更新,不需要重新安装app
    支付宝支付接口的使用详细说明
    .net 数据源DataSet 转换成模型
    .net ajax跨域请求问题
    【系统之音】SystemUI篇(二)SysytemUI功能一览--草稿
  • 原文地址:https://www.cnblogs.com/wuqilang/p/14750474.html
Copyright © 2011-2022 走看看