温故知新（八七）如何封装一个 localStorage，保证数据的时效性

最新推荐文章于 2025-02-27 20:03:56 发布

原创最新推荐文章于 2025-02-27 20:03:56 发布 · 689 阅读

0 ·

CC 4.0 BY-SA版权

温故知新专栏收录该内容

95 篇文章

订阅专栏

博客介绍了 HTML5 本地存储 API 中的 localStorage，它与 sessionStorage 使用方法相同，但关闭页面后 sessionStorage 清空，localStorage 会一直保存。localStorage 以键值对存字符串，有诸多应用场景。其好处是空间大、保存久，但永久有效，若有数据时效性需求，需自行处理，可存 expires 时间戳。

如何封装一个 localStorage，保证数据的时效性

localStorage

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。
localStorage 是 HTML5 本地存储的 API ，使用键值对的方式进行存储数据，存取的数据只能是字符串。
存储方式：以键值对的方式存储字符串
主要应用：购物车、客户登录、游戏存档等
可存储的数据类型：数组，图片，json，样式，脚本等（只要能序列化成字符串的内容都可以存储）
localStorage 的好处就是，存储空间大，长时间保存，不好的地方就是永久有效，除非手动清除。所以如果有数据时效性的需求，就需要自己来处理下，可以和数据一起存一个 expires 时间戳。

let timeLocalStorage = {
    set:function(key,value,expires){
        let data = {value,expires:Date.now()+new Date(expires).getTime()};
        localStorage.setItem(key,JSON.stringify(data));
    },
    get:function(key){
        let data = JSON.parse(localStorage.getItem(key));
        if(data){
            if(data.expires && Date.now() - data.expires > 0){
                console.log('数据已过期');
                localStorage.removeItem(key);
            }else{
                return data.value;
            }
        }
        return null;
    },
    removeItem:function(key){
        localStorage.removeItem(key);
    }
}