存储在localStorage(作为HTML5中DOM存储的一部分)中的数据可用多长时间?我可以为本地存储的数据设置过期时间吗?
当前回答
如果有人还在寻找一个快速的解决方案,不想像jquery等依赖,我写了一个迷你库,添加过期到本地/会话/自定义存储,你可以在这里找到它的源代码:
https://github.com/RonenNess/ExpiredStorage
其他回答
虽然本地存储不提供过期机制,但cookie提供。只需将本地存储密钥与cookie配对,就可以简单地确保本地存储可以使用与cookie相同的过期参数进行更新。
jQuery中的例子:
if (!$.cookie('your_key') || !localStorage.getItem('your_key')) {
//get your_data from server, then...
localStorage.setItem('your_key', 'your_data' );
$.cookie('your_key', 1);
} else {
var your_data = localStorage.getItem('your_key');
}
// do stuff with your_data
本例将cookie设置为默认参数,在浏览器关闭时过期。因此,当浏览器关闭并重新打开时,服务器端调用将刷新your_data的本地数据存储。
注意,这与删除本地数据存储并不完全相同,而是在cookie过期时更新本地数据存储。但是,如果您的主要目标是能够存储超过4K的客户端(cookie大小的限制),那么cookie和本地存储的这种配对将帮助您使用与cookie相同的过期参数来实现更大的存储大小。
我建议将时间戳存储在localStorage中存储的对象中
var object = {value: "value", timestamp: new Date().getTime()}
localStorage.setItem("key", JSON.stringify(object));
您可以解析对象,获取时间戳并与当前Date进行比较,如果需要,还可以更新对象的值。
var object = JSON.parse(localStorage.getItem("key")),
dateString = object.timestamp,
now = new Date().getTime().toString();
compareTime(dateString, now); //to implement
或者,你也可以使用像localstorage-slim.js这样的轻量级包装器来处理这个问题。
不可能指定过期时间。这完全取决于用户。
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
当然,应用程序存储在客户机上的某些内容以后可能不再存在。用户可以显式地摆脱本地存储,或者浏览器可能会遇到空间问题。防御性的编程是很好的。然而,通常情况下,基于这个词的一些实际定义,事情仍然是“永远”的。
编辑——显然,如果你自己的应用程序认为它太旧了,它可以主动删除它。也就是说,您可以显式地在已保存的内容中包含某种时间戳,然后稍后使用该时间戳来决定是否应该刷新信息。
// Functions
function removeHtmlStorage(name) {
localStorage.removeItem(name);
localStorage.removeItem(name+'_time');
}
function setHtmlStorage(name, value, expires) {
if (expires==undefined || expires=='null') { var expires = 3600; } // default: 1h
var date = new Date();
var schedule = Math.round((date.setSeconds(date.getSeconds()+expires))/1000);
localStorage.setItem(name, value);
localStorage.setItem(name+'_time', schedule);
}
function statusHtmlStorage(name) {
var date = new Date();
var current = Math.round(+date/1000);
// Get Schedule
var stored_time = localStorage.getItem(name+'_time');
if (stored_time==undefined || stored_time=='null') { var stored_time = 0; }
// Expired
if (stored_time < current) {
// Remove
removeHtmlStorage(name);
return 0;
} else {
return 1;
}
}
// Status
var cache_status = statusHtmlStorage('cache_name');
// Has Data
if (cache_status == 1) {
// Get Cache
var data = localStorage.getItem('cache_name');
alert(data);
// Expired or Empty Cache
} else {
// Get Data
var data = 'Pay in cash :)';
alert(data);
// Set Cache (30 seconds)
if (cache) { setHtmlStorage('cache_name', data, 30); }
}
@sebarmeli的方法在我看来是最好的,但是如果你只想在一个会话的生命周期内保存数据,那么sessionStorage可能是一个更好的选择:
这是一个维护存储区域的全局对象(sessionStorage) 在页面会话期间可用。页面会话 只要浏览器打开,就会持续,并在页面上存活 重新加载和恢复。在新选项卡或窗口中打开一个页面会导致 要启动的新会话。
sessionStorage MDN:
推荐文章
- 使用JQuery播放/暂停HTML 5视频
- Node.js和CPU密集型请求
- 根据子元素对元素应用CSS样式
- val()和text()的区别
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行,而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- 如何嵌入HTML到IPython输出?
- 如何删除/忽略:悬停css风格的触摸设备
- Bower: ENOGIT Git未安装或不在PATH中
- HTML5文本区域占位符不出现
- 添加javascript选项选择
- 在Node.js中克隆对象
- HTML tabindex属性是什么?
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?