专栏首页技术探索localStorage简单封装设置失效时间

localStorage简单封装设置失效时间

1.概述:

在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

localStorage和cookie 的区别不详细对比,但是localStorage存储数据的时候有一点需要我们注意的。

2.场景:

我们前端需要调用第三方api异步获取我们的数据A(短时间内数据都一样),然后我们拿到数据A来进行其他操作。试想下从获取数据A再到用数据A获取我么想要的最终结果,这段时间对用户来说是很漫长了! 其实我们可以使用

  • Cookie来存储数据,但是Cookie存储的数据有限制。
  • 使用localStorage能满足存储数据的条件,但是它却没有失效时间。 那我们改怎么优化这种场景呢?

综上所述,Cookie已经无法满足我们的要求了,那么我们就从localStorage入手吧。既然localStorage没有失效时间,我们就封装下使其满足我们的需求。

3.实现:

下面的代码仅供参考:

var storageUtil = {
    /**
     * @param key
     * @param data
     * @param time 失效时间(秒),默认一周
     * @returns {boolean}
     */
    put: function (key, data, time) {
        try {
            if (!localStorage) {
                return false;
            }
            if (!time || isNaN(time)) {
                time = 60*60*24*7;
            }
            var cacheExpireDate = (new Date() - 1) + time * 1000;
            var cacheVal = {val: data, exp: cacheExpireDate};
            localStorage.setItem(key, JSON.stringify(cacheVal));//存入缓存值
        } catch (e) {
        }
    },
    get: function (key) {
        try {
            if (!localStorage) {
                return false;
            }
            var cacheVal = localStorage.getItem(key);
            var result = JSON.parse(cacheVal);
            var now = new Date() - 1;
            //缓存不存在
            if (!result) {
                return null;
            }
            //缓存过期
            if (now > result.exp) {
                this.remove(key);
                return "";
            }
            return result.val;
        } catch (e) {
            this.remove(key);
            return null;
        }
    },
    remove: function (key) {
        if (!localStorage) {
            return false;
        }
        localStorage.removeItem(key);
    }
}

4.使用实例

storageUtil.put("aa",JSON.stringify(data));

var cacheData = storageUtil.get("aa");
if(cacheData !== null || cacheData !== ''){
    
}else{

}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Jedis在高并发报错 (java.net.SocketException: Connection reset by peer: socket write error)

    Connection reset by peer: socket write error错误分析: 常出现的Connection reset by peer: ...

    日薪月亿
  • kibana(6.2.4)集成sentinl报警

    选择wizard或者advanced(最终都要转换成advanced,wizard更容易理解)

    日薪月亿
  • 微服务扩展性和高可用-可扩展性、高可用性和性能

    术语可扩展性、高可用性、性能和关键任务对于不同的组织或组织内的不同部门来说可能意味着不同的事情。它们经常互换,造成混乱,导致管理不善的期望、实现延迟或不切实际的...

    日薪月亿
  • ios 版本更新提示-硬更新/软更新

    步骤一: 将检测更新写到APPDelegate的applicationDidBecomeActive中

    用户1219438
  • 剑指offer——数组中重复的数字

    题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内。 数组中某些数字是重复的,但不知道有几个数字是重复的。也不知道每个数字重复几次。请找出数组...

    AI那点小事
  • 从服务端视角看高并发难题

    所谓服务器大流量高并发指的是:在同时或极短时间内,有大量的请求到达服务端,每个请求都需要服务端耗费资源进行处理,并做出相应的反馈。

    IT小白龙
  • 你还在等着用户反馈BUG?

    原文: Why relying on your users to report errors is the dumbest thing you’ll ever ...

    Fundebug
  • 实验long raw 和 blob两种数据类型遇到dblink的表现

    首先long raw从Oracle 10g开始就不再被建议使用,建议用blob代替。同理,long建议用clob代替。 本文从运维角度实验long raw 和...

    Alfred Zhao
  • 第3章代码-光栅化与裁剪

    步行者08
  • 护网之Linux应急处理操作手册

    虽然今天处置的时候并非本文章情况,等过段时间结束了我在发一下我的处置过程涉及到的技术点以及思路

    Aran

扫码关注云+社区

领取腾讯云代金券