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

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分钟