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

合集 - 前端小知识点(36)
1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用2.如何保证用户的使用体验3.如何解决页面请求接口大规模并发问题4.设计一套全站请求耗时统计工具5.大文件上传6.h5如何解决移动端适配问题7.实现站点一键换肤功能实现方式有哪些8.如何实现网页加载进度条9.常见图片懒加载方式有哪些10.cookie构成部分有哪些11.DNS协议了解多少12.函数式编程了解多少13.一直在window上面挂东西是否有什么风险14.小程序为什么会有两个线程
15.如何通过设置失效时间清除本地存储的数据?
16.如果不使用脚手架，如果用webpack构建一个自己的react应用17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数18.package.json 里面 sideEffects 属性的作用19.script 标签上有那些属性20.SPA 中使用 hash 路由时作用和意义21.用户访问页面白屏了，原因是啥如何排查?22.[代码实现]S 中如何实现大对象深度对比23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法24.<script> 标签放在 HTML 文档的 <body> 内底部25.虚拟滚动加加载的原理和实现思路26.ts二刷27.promise面试题28.命令行创建 uni-app 项目29.uniapp+v3的小知识点30.ts文件忽略校验31.['',''].join(" ").trim()32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)33.可视化点击x轴标签实现标签文字切换34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本35.uniapp+vue2实现下载相关36.深度响应式劫持vue3
收起
  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('过期数据已删除');
      };
    }
  };
};
posted @   jialiangzai  阅读(101)  评论(0)  编辑  收藏  举报
相关博文：
· 进入阅读页面二次需求处理
· 登录后继续浏览之前的页面
· localstorage设置过期时间的用法
· localStorage如何实现定时（非永久）存储
· 如何设置LocalStorage过期时间
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

喜欢请打赏

扫描二维码打赏

微信打赏

了解更多

点击右上角即可分享
微信分享提示