一小时后如何删除本地存储？

Posted 2023-03-05

【中文标题】一小时后如何删除本地存储？

【英文标题】：How can I remove local storage after one hour?

【发布时间】：2018-01-15 15:03:39

【问题描述】：

我的数据是对象

我像这样使用本地存储 javascript 保存它：

localStorage.setItem('storedData', JSON.stringify(data))

我只想将该数据保留 1 小时。因此，如果超过 1 小时，则数据将被删除

我知道要删除这样的数据：

localStorage.removeItem("storedData")

但是如何将其设置为 1 小时后自动删除？

【问题讨论】：

使用 setTimeout() 函数清除它。

不知道它是否适合你，但你可以设置一个一小时后过期的cookie并将数据存储在那里？

【参考方案1】：

你不能。 When do items in html5 local storage expire? 您唯一能做的就是将删除语句设置为 1 小时的超时。 这要求用户停留在您的页面上，否则不会执行超时。

您还可以设置过期字段。当用户重新访问您的网站时，首先检查过期时间并在下次访问时删除存储空间。

【讨论】：

“过期字段”通常更实用，因为 setTimeout 方法要求用户在同一页面上停留一个小时。除非您正在编写 SPA 或使用框架，否则这很少是实际场景。

【参考方案2】：

使用 setInterval，在本地数据中设置/推送过期键， 检查下面的代码。

var myHour = new Date();
myHour.setHours(myDate.getHours() + 1); //one hour from now
data.push(myHour);
localStorage.setItem('storedData', JSON.stringify(data))

function checkExpiration () 
    //check if past expiration date
        var values = JSON.parse(localStorage.getItem('storedData'));
    //check "my hour" index here
    if (values[1] < new Date()) 
        localStorage.removeItem("storedData")
    


function myFunction() 
    var myinterval = 15*60*1000; // 15 min interval
    setInterval(function() checkExpiration(); , myinterval );


myFunction();

【参考方案3】：

var hours = 1; // to clear the localStorage after 1 hour(if someone want to clear after 8hrs simply change hours=8)
var now = new Date().getTime();
var setupTime = localStorage.getItem('setupTime');
if (setupTime == null) 
    localStorage.setItem('setupTime', now)
 else 
    if(now-setupTime > hours*60*60*1000) 
        localStorage.clear()
        localStorage.setItem('setupTime', now);
    

【参考方案4】：

您不能使用 setTimeout()。因为您不能保证您的代码将在 1 小时内在浏览器上运行。但是您可以设置时间戳，返回时只需检查时间戳并根据到期条件清除存储。

【参考方案5】：

改用 cookie

Cookies.set('foo_bar', 1, expires: 1/24 )

【讨论】：

不回答问题。 cookie的容量很小。

【参考方案6】：

这适用于浏览器窗口不会在页面呈现时重新加载的 SPA：

在本地存储中设置expiresIn 字段。 在窗口重新加载检查以查看 if current time >= expiresIn if true clear localStorage items else carry on 您也可以在您的业务逻辑需要时执行此检查。

【参考方案7】：

只需在您的应用中添加检查以检查变量是否存在，然后对其进行检查。将unix timestamp 放在变量上，并在用户下次访问您的网站时进行比较。

【参考方案8】：

您也可以在WebWorkers 中使用IndexedDB。它的基本意思是你可以创建一个与你的主线程 JavaScript 程序并行的，像这样

var worker = new Worker('worker.js');

优点是当它完成它的工作时，你没有对它的引用，它会自动清理。 但是，由于我对上述内容并不完全确定，这里是来自Living Standard

的

工人的一生

工作人员与其他工作人员以及浏览上下文进行通信 通过消息通道及其 MessagePort 对象。

每个 WorkerGlobalScope 对象工作全局范围都有一个列表 worker 的端口，由所有 MessagePort 对象组成 与另一个端口纠缠在一起并且有一个（但只有一个）端口 由工作人员全局范围所有。此列表包括隐式 MessagePort 在专用工作人员的情况下。

给定一个环境设置对象 o 当创建或获取一个 worker，要添加的相关所有者取决于全局对象的类型 由 o 指定。如果 o 指定一个全局对象，它是 WorkerGlobalScope 对象（即，如果我们正在创建一个嵌套的专用 worker)，那么相关的所有者就是那个全局对象。否则，o 指定一个作为 Window 对象的全局对象，以及相关的 owner 是 o 指定的负责文件。 如果一个工人的 WorkerGlobalScope 的 所有者集不为空或：

它的所有者集为空的时间不超过一个短的实现定义的超时值， 它的 WorkerGlobalScope 对象是一个 SharedWorkerGlobalScope 对象（即，worker 是一个共享的worker），并且 用户代理有一个浏览上下文，其 Document 对象未完全加载。

另一个好处是你可以像这样终止一个工人

worker.terminate();

另外，值得一提的是

IndexedDB 内置了对模式版本和升级的支持 它的IDBOpenDBRequest.onupgradeneeded() 方法；但是，你仍然 需要以可以处理的方式编写升级代码 来自以前版本（包括有错误的版本）的用户。

【参考方案9】：

我认为 setTimeout() 方法可以解决问题。

更新：

将值设置为localStorage的同时还设置了记录数据的时间。

// Store the data with time
const EXPIRE_TIME = 1000*60*60;
localStorage.setItem('storedData', JSON.stringify(
  time: new Date(),
  data: "your some data"
));

// start the time out

setTimeout(function() 
    localStorage.removeItem('storedData');
, EXPIRE_TIME); // after an hour it will delete the data

现在的问题是如果用户离开网站。并且 setTimeout 将不起作用。因此，当用户下次访问该站点时，您必须再次引导 setTimeout。

// On page load
$(document).ready(function() 
  let userData = JSON.parse(localStorage.getItem('storedData')) || ;
  let diff = new Date() - new Date(userData.time || new Date());
  let timeout = Math.max(EXPIRE_TIME - diff, 0);
  setTimeout(function() 
      localStorage.removeItem('storedData');
  , timeout);
)

【讨论】：

不！当您退出页面时，setTimeout 会消失。

[delete_this.jpeg]

setTimeout()。我们无法确保我们的代码会在浏览器上运行。

该死，这太糟糕了！