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

• 假设要存储一个用户的登录凭证（如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');
}

• 例如，存储一个用户在当前页面会话中选择的商品列表。可以直接将商品列表数据存储到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);

• 首先，打开或创建一个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('过期数据已删除');
      };
    }
  };
};