精华内容
下载资源
问答
  • sessionstorage过期时间
    2020-06-12 10:20:28

    封装window.sessionStorage,window.localStorage,并且可以设置过期时间

    封装window.sessionStorage

    export const session = {
        set(key, val) {
            if (typeof val !== 'string') {
                val = JSON.stringify(val);
            }
            window.sessionStorage.setItem(key, val);
        },
        get(key) {
            let val = window.sessionStorage.getItem(key);
            try {
                val = JSON.parse(val);
            } catch (e) {
                console.log(`${val} Unexpected token H in JSON at position 0`);
            }
            return val;
        },
        clear() {
            window.sessionStorage.clear();
        },
        remove(key) {
            if (window.sessionStorage.getItem(key)) {
                window.sessionStorage.removeItem(key);
            }
        }
    };
    

    封装window.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);
            }
        }
    };
    

    过期时间参考

    更多相关内容
  • BOM提供了localStorage和sessionStorage用于在浏览器中保存页面数据,区别在于:使用localStorage存储的数据将会一一直存在(除非...并且,这两种web存储方式都不支持设置过期时间,那如果业务中有需求需要设置过期...

    前端中级篇之给localStorage和sessionStorage设置失效时间

    1 前言

    BOM提供了localStorage和sessionStorage用于在浏览器中保存页面数据,区别在于:使用localStorage存储的数据将会一一直存在(除非使用removeItem或者清除缓存),而sessionStorage的有效期是和存储数据脚本所在的最顶层的窗口或者是浏览器标签是一样的,一旦窗口或者标签页被永久关闭了,存储的数据也就失效了。并且,这两种web存储方式都不支持设置过期时间,那如果业务中有需求需要设置过期时间,应该怎么做呢?这个时候就需要我们自己封装一下localStorage和sessionStorage。

    2 封装localStorage和sessionStorage

    业务需求:如果网页需要频繁请求同一个接口,而该接口返回的数据的更新频率又很低,这种时候我认为最好的做法就是使用sessionStorage,在第一次打开该页面的时候请求一次数据然后把数据存储到sessionStorage中,后续就可以直接在本地读取数据了避免频繁发送请求。但是我又希望能够隔一段时间让本地的sessionStorage失效,继而发送一个请求,以更新本地存储。

    我给出的方案:封装sessionStorage,给其中的数据设置一个过期时间,每次请求数据的时候先根据预设的key访问sessionStorage,如果其中存有数据,比较数据是否过期,如果没有过期就直接使用sessionStorage中的数据;如果数据过期了,通过接口请求数据,并且把返回的数据保存到sessionStorage。

    直接看封装好的webStorage代码,注释写的比较详细,就不再过多解释了。

    const webStorage = {
        /**
         * 从storage中读取数据,使用与sessionStorage和localStorage相同的读取数据函数名称
         * @param {*} storageType 存储类型,只能为sessionStorage或localStorage
         * @param {*} key 读取数据的key
         * @returns 
         */
        getItem(storageType, key) {
            // 如果storageType字段不合法,直接返回空
            if (!['sessionStorage', 'localStorage'].includes(storageType)) {
                return null;
            }
    
            const storeData = window[storageType].getItem(key);
            // 如果根据key没有找到数据,直接返回空
            if (!storeData) {
                return null;
            }
    
            const parsedData = JSON.parse(storeData);
            const currentTimestamp = new Date().getTime();
    
            // 将当前的时间戳和保存在storage中的timestamp进行比较
            // 如果时间差小于等于过期时间说明没有过期,直接返回数据
            // 否则,说明数据已经过期,将storage中的key清除
            if (currentTimestamp - parsedData.timestamp <= parsedData.expire) {
                return parsedData.value;
            } else {
                window[storageType].removeItem(key);
            }
    
            return null;
        },
    
        /**
         * 向storage中添加字段,使用与sessionStorage和localStorage相同的读取数据函数名称
         * @param {*} storageType 存储类型,只能为sessionStorage或localStorage
         * @param {*} key 保存数据的key
         * @param {*} value 保存的数据
         * @param {*} expire 过期时间,默认为1分钟
         */
        setItem(storageType, key, value, expire = 60000) {
            // 如果storageType字段不合法,直接返回空
            if (!['sessionStorage', 'localStorage'].includes(storageType)) {
                return;
            }
    
            const obj = {
                value: value,
                expire: expire,
                timestamp: new Date().getTime()
            }
    
            const stringfiedData = JSON.stringify(obj);
            window[storageType].setItem(key, stringfiedData);
        }
    }
    
    展开全文
  • /** * localStorage * @调用:_local.set('access_token', '123456', 5000); * @调用:_local.get('access_token');... //存储,可设置过期时间 set(key, value, expires) { let params = { key...
    /**
     * localStorage
     * @调用:_local.set('access_token', '123456', 5000);
     * @调用:_local.get('access_token');
     */
    
    var _local = {
        //存储,可设置过期时间
        set(key, value, expires) {
            let params = { key, value, expires };
            if (expires) {
                // 记录何时将值存入缓存,毫秒级
                var data = Object.assign(params, { startTime: new Date().getTime() });
                localStorage.setItem(key, JSON.stringify(data));
            } else {
                if (Object.prototype.toString.call(value) == '[object Object]') {
                    value = JSON.stringify(value);
                }
                if (Object.prototype.toString.call(value) == '[object Array]') {
                    value = JSON.stringify(value);
                }
                localStorage.setItem(key, value);
            }
        },
        //取出
        get(key) {
            let item = localStorage.getItem(key);
            // 先将拿到的试着进行json转为对象的形式
            try {
                item = JSON.parse(item);
            } catch (error) {
                // eslint-disable-next-line no-self-assign
                item = item;
            }
            // 如果有startTime的值,说明设置了失效时间
            if (item && item.startTime) {
                let date = new Date().getTime();
                // 如果大于就是过期了,如果小于或等于就还没过期
                if (date - item.startTime > item.expires) {
                    localStorage.removeItem(name);
                    return false;
                } else {
                    return item.value;
                }
            } else {
                return item;
            }
        },
        // 删除
        remove(key) {
            localStorage.removeItem(key);
        },
        // 清除全部
        clear() {
            localStorage.clear();
        }
    }
    
    /**
     * sessionStorage
     */
    var _session = {
        get: function (key) {
            var data = sessionStorage[key];
            if (!data || data === "null") {
                return null;
            }
            return JSON.parse(data).value;
        },
        set: function (key, value) {
            var data = {
                value: value
            }
            sessionStorage[key] = JSON.stringify(data);
        },
        // 删除
        remove(key) {
            sessionStorage.removeItem(key);
        },
        // 清除全部
        clear() {
            sessionStorage.clear();
        }
    }
    export { _local, _session }
    
    
    展开全文
  • 众所周知,前端三大缓存,cookie,sessionStorage,localStorage,cookie空间太小,一旦大了,会消耗流量,只适合存一些登录会话信息,而sessionStorage过期时间就是关闭浏览器,是个临时会话窗口,但是,最近这个...

    众所周知,前端三大缓存,cookie,sessionStorage,localStorage,cookie空间太小,一旦大了,会消耗流量,只适合存一些登录会话信息,而sessionStorage的过期时间就是关闭浏览器,是个临时会话窗口,但是,最近这个差点把我坑了,就是sessionStorage只能在同一标签下共享,加入你把网址复制粘贴到新打开的标签页里面,你会惊喜的发现,what?居然不共享,这不坑爹呢吗?咳咳。。还有就是localStorage了,这个好处就是存储空间大,长时间保存,同一浏览器,标签页全部共享,它是直接存到电脑硬盘上的,不好的是,它是永久有效的,除非手动改清除,否则它会在你电脑里待上一辈子,供他吃好的喝好的,也就是无法设置失效时间,但是我还真不服了,凭什么我用你就得养你一辈子,哼哼,于是我就自己简单封装一下,让它可以设置失效时间,下面我们用ES6的类来封装

    class Storage{
            constructor(name){
                this.name = 'storage';
            }
            //设置缓存
            setItem(params){
                let obj = {
                    name:'',
                    value:'',
                    expires:"",
                    startTime:new Date().getTime()//记录何时将值存入缓存,毫秒级
                }
                let options = {};
                //将obj和传进来的params合并
                Object.assign(options,obj,params);
                if(options.expires){
                //如果options.expires设置了的话
                //以options.name为key,options为值放进去
                    localStorage.setItem(options.name,JSON.stringify(options));
                }else{
                //如果options.expires没有设置,就判断一下value的类型
                       let type = Object.prototype.toString.call(options.value);
                       //如果value是对象或者数组对象的类型,就先用JSON.stringify转一下,再存进去
                    if(Object.prototype.toString.call(options.value) == '[object Object]'){
                        options.value = JSON.stringify(options.value);
                    }
                    if(Object.prototype.toString.call(options.value) == '[object Array]'){
                        options.value = JSON.stringify(options.value);
                    }
                    localStorage.setItem(options.name,options.value);
                }
            }
            //拿到缓存
            getItem(name){
                let item = localStorage.getItem(name);
                //先将拿到的试着进行json转为对象的形式
                try{
                    item = JSON.parse(item);
                }catch(error){
                //如果不行就不是json的字符串,就直接返回
                    item = item;
                }
                //如果有startTime的值,说明设置了失效时间
                if(item.startTime){
                    let date = new Date().getTime();
                    //何时将值取出减去刚存入的时间,与item.expires比较,如果大于就是过期了,如果小于或等于就还没过期
                    if(date - item.startTime > item.expires){
                    //缓存过期,清除缓存,返回false
                        localStorage.removeItem(name);
                        return false;
                    }else{
                    //缓存未过期,返回值
                        return item.value;
                    }
                }else{
                //如果没有设置失效时间,直接返回值
                    return item;
                }
            }
            //移出缓存
            removeItem(name){
                localStorage.removeItem(name);
            }
            //移出全部缓存
            clear(){
                localStorage.clear();
            }
        }

    以上就是全部代码了,diamagnetic说明我全部写在注释里了,我封装的这个还有个好处就是,你存进去是什么类型的值,取出来还是什么类型的值,比如你存进去是个对象,取出来还是个对象,用不着转类型了,大家都知道缓存只支持字符串类型的数据,但是我这里面已经帮你做好了封装,你只管存和取就可以了,下面我们来试试效果

    设置失效时间

    let storage = new Storage();
    storage.setItem({
            name:"name",
               value:"前端Owen"
        })
    let value = storage.getItem('name');
    console.log('我是value',value);

     

    下面我们检验存进去的类型和取出来的类型

    普通字符串以上已经试过了,现在试试对象

    storage.setItem({
             name:"name",
             value:{
                    name:"前端Owen",
                    skills:"聪明,帅气"
             },
       })

    取出:
    let value = storage.getItem('name');
    console.log('我是value',value);
    下面再试试数组对象:

    storage.setItem({
                name:"name",
                value:[
                    {
                        name:"前端林三哥",
                        skills:"聪明,帅气"
                    },
                    {
                        name:"前端林小二",
                        skills:"聪明,帅气,穷"
                    }
                ],
            })
     

    展开全文
  • https://github.com/WQTeam/web-storage-cache
  • sessionStroage 的有效期

    2019-04-11 01:10:38
    NULL 博文链接:https://rainbow702.iteye.com/blog/1679982
  • sessionStorage什么时候失效

    千次阅读 热门讨论 2021-01-13 18:41:23
    最近在调试程序的时候无意间看到 cookie 的过期时间是 session,这个 session 表示的是什么时候过期?牵扯出来另一个存储方案 sessionStorage 存储的数据又是什么时候过期呢? 在查找相关资料的时候总会看到会话结束...
  • localStroage和sessionStorage以及cookie的区别,怎样设置localStorage的过期时间
  • /** * localStorage * @调用:_local.set('access_token', '123456', 5000);... //存储,可设置过期时间 set(key, value, expires) { let params = { key, value, expires }; if (expires) { .
  • localstorage sessionStorage cookie 三者介绍 localstorage 本地存储 :只存储文本, 时间永久,相比于cookie 存储内容大(5M) ,不安全不允许跨域不能跨浏览器。不会发往服务器。 window的属性 返回 一个...
  • 前言 一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存,减少对...但是实际使用时我们需要对缓存设置过期时间,本文便是讲解如何为localstorage添加过期时间功能。 这三者仅支持同源(host+p
  • localStorage实现7天登录过期 实现原理:存localStorage比较初始登录时存在... // 过期时间7天 var time = 604800000; //1000*60*60*24*7; var storage = window.localStorage; var oldTimestamp = storage.g...
  • cookie、sessionStorage、localStorage 区别? 如何实现可过期的localstorage数据?(如何清理过期的缓存) 登录验证实现(token)
  • cookie,localStorage,sessionStorage都可以实现客户端存储,三者的区别有哪些了? cookie作为最早期的被设计web浏览器存储少量数据,从底层看,它是作为http协议的一种扩展实现。cookie数据会自动在web浏览器和...
  • localStorage保存数据会一直保存没有过期时间,不会随浏览器发送给服务器。大小5M或更大 sessionStorage仅当前页面有效一旦关闭就会被释放。也不会随浏览器发送给服务器。大小5M或更大   cookie ...
  • Cookie 封装 - IE8下sessionStorage解决方案,chrome踩坑 前言须知(必知) 此次是为了实现项目中的tab打开效果,另外配有本地存储,刷新后打开的窗口还在,w3school、MDN上面查了下说IE8 是兼容sessionStorage,...
  • Web存储缓存语言见WebStorageCache对HTML5 localStorage和sessionStorage进行了扩展,添加了超时时间,序列化方法。可以直接存储json对象,同时可以非常简单的进行超时时间的设置。优化: WebStorageCache自动清除...
  • Vue使用localStorage设置token及过期时间

    千次阅读 2021-03-31 10:56:25
    } }, main.js // 设置登录过期时间(一天) let EXPIRESTIME = 86400000 // 校验登录 router.beforeEach(function(to, from, next) { if (to.meta.needLogin) { //页面是否登录,本地存储中是否有token(uid)数据,...
  • [js] 模拟 localStorage 时如何实现过期时间功能 1.存储时记录下有效截止时间 2.取数据时判断是否超过有效时间,在有效期内则返回,不在则提示或返回空并且将其删除 class MyStorage { get(key) { const wrapValue ...
  • expireTime是此类信息过期所需的时间; 用法: angular . module ( 'myAwesomeApp' , [ 'emd.ng-xtorage-expiration' ] ) . run ( function ( $xtorage ) { $xtorage . saveInLocalStorage
  • store.js过期时间设置

    2022-05-26 16:44:19
    store.js设置过期时间
  • VUE对Storage的过期时间设置,及增删改查 面试过程中,我们经常会被问到storage相关的问题和操作; 下边我就基于实际项目开发,来讲述这些日常的操作问题; 原理:在储存storage的过程中,储存一个时间戳进去, 再次获取时, ...
  • localStorage设置有效期、过期时间

    千次阅读 2021-11-22 22:55:22
    localStorage默认是不会过期的,也...过期时间在存值的时候传入,函数内部生成当前时间戳,取值时函数内部生成当前时间戳,如果存值时间戳加上过期时间戳小于当前时间戳说明还没过期,返回该值,反之就过期了,删除该
  • getItem, setItem, removeItem, clear 这几个 API 轻松的对存储在浏览器本地的数据进行读,写, 删操作, 但是相比于 cookie, localStorage 唯一美中不足的就是不能设置每一个键的过期时间。 localStorage ...
  • sweet-storage给 localStorage 整合了过期时间的功能localStorage 是浏览器提供给我们的原生api, 目前 localStorage 只能实现永久存储。本工具给localStorage整合了设置过期时间的功能, 并让用户可以在存储信息...
  • 今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie、webStorage(localStorage和sessionStorage)。下面我们来一一认识它们。 Cookie基于HTTP规范,用来识别用户。 Cookie是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,643
精华内容 3,857
关键字:

sessionstorage过期时间