如何通过设置失效时间清除本地存储的数据?

1. 使用localStorage和时间戳结合的方式（JavaScript）
   • 原理：localStorage是一种在浏览器中存储数据的方式，数据不会过期，除非手动清除。为了实现数据的自动过期，可以将数据存储的同时，也存储一个时间戳。在读取数据时，通过比较当前时间和存储的时间戳来判断数据是否过期。
   • 存储数据时添加时间戳：
     • 假设要存储一个用户的登录凭证（如token），并且希望它在1小时（3600秒）后过期。首先，将token和当前时间加上过期时间后的时间戳一起存储到localStorage中。例如：

     const token = 'your - token - value';
     const expirationSeconds = 3600;
     const expirationTime = Date.now() + expirationSeconds * 1000;
     localStorage.setItem('token', JSON.stringify({value: token,expiration: expirationTime
     }));
     

   • 读取数据并检查是否过期：
     • 当需要使用token时，先从localStorage中读取存储的对象，然后获取其中的时间戳，与当前时间进行比较。如果时间戳小于当前时间，说明数据已经过期，需要清除localStorage中的数据；否则，可以使用存储的token。例如：

     const storedTokenObject = JSON.parse(localStorage.getItem('token'));
     if (storedTokenObject && storedTokenObject.expiration > Date.now()) {const token = storedTokenObject.value;// 使用token进行后续操作，如发送带有token的请求
     } else {// 数据过期，清除localStorage中的数据localStorage.removeItem('token');
     }
     

2. 使用sessionStorage结合页面会话时长（JavaScript）
   • 原理：sessionStorage存储的数据在当前页面会话结束时会自动清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的会话。当用户关闭浏览器标签或窗口时，会话结束，sessionStorage中的数据也随之清除。可以利用这个特性来实现一种相对简单的基于会话时长的数据存储。
   • 存储数据到sessionStorage：
     • 例如，存储一个用户在当前页面会话中选择的商品列表。可以直接将商品列表数据存储到sessionStorage中。例如：

     const selectedProducts = ['product1', 'product2'];
     sessionStorage.setItem('selectedProducts', JSON.stringify(selectedProducts));
     

   • 注意数据的自动清除：
     • 由于sessionStorage会在页面会话结束时自动清除数据，所以不需要手动设置失效时间。但要注意，如果希望数据在用户长时间不操作后清除（比如设置一个自定义的会话超时时间），就需要结合其他手段，如定时器来检测用户的操作时间间隔，当超过设定的时间后手动清除sessionStorage中的数据。例如，可以在页面加载时设置一个定时器，当用户进行操作（如点击、滚动等）时重置定时器，当定时器超时后清除sessionStorage数据。

     let sessionTimeout;
     const sessionTimeoutSeconds = 3600; // 1小时
     function resetSessionTimer() {clearTimeout(sessionTimeout);sessionTimeout = setTimeout(() => {sessionStorage.clear();}, sessionTimeoutSeconds * 1000);
     }
     window.addEventListener('load', resetSessionTimer);
     window.addEventListener('click', resetSessionTimer);
     window.addEventListener('scroll', resetSessionTimer);
     

3. 在IndexedDB中设置过期时间（较复杂的存储方案，JavaScript）
   • 原理：IndexedDB是一种更强大的浏览器端数据库，支持事务操作和复杂的数据存储。可以在IndexedDB中存储数据对象，并在对象中添加一个表示过期时间的属性。在读取数据时，检查这个过期时间属性来判断数据是否过期。
   • 打开或创建IndexedDB数据库并存储数据：
     • 首先，打开或创建一个IndexedDB数据库。例如，创建一个名为myDataBase的数据库，用于存储带有过期时间的用户设置数据。

     const request = window.indexedDB.open('myDataBase', 1);
     let db;
     request.onupgradeneeded = function (event) {db = event.target.result;const objectStore = db.createObjectStore('userSettings', { keyPath: 'id' });
     };
     request.onsuccess = function (event) {db = event.target.result;const userSettings = {id: 1,theme: 'dark',expiration: Date.now() + 7200 * 1000 // 2小时后的过期时间};const transaction = db.transaction(['userSettings'], 'readwrite');const objectStore = transaction.objectStore('userSettings');const request = objectStore.put(userSettings);request.onsuccess = function () {console.log('数据已存储');};
     };
     

   • 读取数据并检查过期时间：
     • 当需要读取userSettings数据时，打开数据库，获取数据对象，检查过期时间。如果过期，删除数据；如果未过期，使用数据。例如：

     const request = window.indexedDB.open('myDataBase', 1);
     request.onsuccess = function (event) {db = event.target.result;const transaction = db.transaction(['userSettings'], 'readonly');const objectStore = transaction.objectStore('userSettings');const getRequest = objectStore.get(1);getRequest.onsuccess = function () {const userSettings = getRequest.result;if (userSettings && userSettings.expiration > Date.now()) {console.log('主题设置：', userSettings.theme);} else {// 数据过期，删除数据const deleteRequest = objectStore.delete(1);deleteRequest.onsuccess = function () {console.log('过期数据已删除');};}};
     };