什么？要给localStorage加上过期时间

小半 • 2024年3月8日下午8:42 • 前端开发 • 阅读 124

localStorage 是 HTML5 引入的本地存储机制,可以在浏览器端保存键值对数据。

特点

数据存储在浏览器端,页面关闭后数据不丢失
储存空间较大,不同浏览器支持至少 5MB 存储
API简单,可以直接像操作对象一样使用
数据格式为字符串类型,需要自行序列化和反序列化
同源的页面间可以共享 localStorage 数据
数据有更好的安全性和生命周期,相比cookie更适合存储重要信息

使用

存储数据:

localStorage.setItem('key', 'value');

获取数据:

let value = localStorage.getItem('key');

移除数据:

localStorage.removeItem('key');

清空所有数据:

localStorage.clear();

遍历所有键值:

for (let i = 0; i < localStorage.length; i++) {
  let key = localStorage.key(i);
  let value = localStorage.getItem(key);
}

应用场景

localStorage 适合保存应用程序需要记住的少量数据,如用户设置、表单自动填充等。
不适合存储敏感信息,因为数据可以被查看和修改。
大量数据也不适合存入 localStorage,可以考虑 IndexedDB 或服务器端存储。
总之,明智地使用 localStorage 可以在一定程度增强 Web 应用程序的用户体验。

那么，如何给localStorage加上有效期呢

export default class Storage {
    constructor(expiryTime) {
        this.expiryTime = expiryTime;
    }
    set(key, value, expiryTime) {
        let obj = {
            data: value,
            expiryTime: Date.now()+(expiryTime || this.expiryTime)
        };
        localStorage.setItem(key, JSON.stringify(obj));
    }
    get(key) {
        let item = localStorage.getItem(key);
        if (!item) {
            return null;
        }
        item = JSON.parse(item);
        let nowTime = Date.now();
        if (item.expiryTime && nowTime > item.expiryTime) {
            console.log('已过期');
            this.remove(key);
            return null;
        } else {
            return item.data;
        }
    }
    remove(key) {
        localStorage.removeItem(key);
    }
    clear() {
        localStorage.clear();
    }
}

使用

import Storage from 'xx/storage.js'
const storage1 = new Storage(24*60*60*1000); // 设置全局默认过期时间为24小时
storage1.set('name', 'nan'); // 使用全局默认过期时间
storage1.set('age', 18, 60*1000); // 设置独立的过期时间为1分钟