我的数据是对象
我像这样使用本地存储 javascript 保存它：
localStorage.setItem('storedData', JSON.stringify(data))
我只想将该数据保留 1 小时。因此，如果超过 1 小时，则数据将被删除
我知道要删除这样的数据：
localStorage.removeItem("storedData")
但是如何将其设置为 1 小时后自动删除？
【问题讨论】：
标签： javascript jquery html local-storage
你不能。 When do items in HTML5 local storage expire? 您唯一能做的就是将删除语句设置为 1 小时的超时。 这要求用户停留在您的页面上，否则不会执行超时。
您还可以设置过期字段。当用户重新访问您的网站时，首先检查过期时间并在下次访问时删除存储空间。
【讨论】：
使用 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();
【讨论】：
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);
}
}
【讨论】：
您不能使用 setTimeout()。因为您不能保证您的代码将在 1 小时内在浏览器上运行。但是您可以设置时间戳，返回时只需检查时间戳并根据到期条件清除存储。
【讨论】：
改用 cookie
Cookies.set('foo_bar', 1, { expires: 1/24 })
【讨论】：
这适用于浏览器窗口不会在页面呈现时重新加载的 SPA：
在本地存储中设置expiresIn 字段。
在窗口重新加载检查以查看 if current time >= expiresIn
if true clear localStorage items else carry on
您也可以在您的业务逻辑需要时执行此检查。
【讨论】：
只需在您的应用中添加检查以检查变量是否存在，然后对其进行检查。将unix timestamp 放在变量上，并在用户下次访问您的网站时进行比较。
【讨论】：
您也可以在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() 方法；但是，你仍然 需要以可以处理的方式编写升级代码 来自以前版本（包括有错误的版本）的用户。
【讨论】：
我认为 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);
})
【讨论】：