数据存储localStorage
(作为 HTML5 中的 DOM 存储的一部分)可用多长时间?我可以为我放入本地存储的数据设置过期时间吗?
HTML5 本地存储中的项目何时过期?
我建议将时间戳存储在您存储在 localStorage中的对象中
var object = {value: "value", timestamp: new Date().getTime()}
localStorage.setItem("key", JSON.stringify(object));
您可以解析对象,获取时间戳并与当前日期进行比较,并在必要时更新对象的值。
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
当然,您的应用程序存储在客户端上的某些内容可能稍后不存在。用户可以明确地摆脱本地存储,否则浏览器可能会遇到空间问题。防御性编程很好。然而,一般情况下,根据该词的一些实际定义,事情仍然是“永远”的。
编辑- 显然,如果您自己的应用程序认为它太旧,它可以主动删除内容。也就是说,您可以在保存的内容中明确包含某种时间戳,然后稍后使用它来决定是否应该刷新信息。
您可以使用lscache。它会自动为您处理,包括存储大小超过限制的实例。如果发生这种情况,它会开始修剪最接近其指定到期时间的项目。
来自readme
:
lscache.set
Stores the value in localStorage. Expires after specified number of minutes.
Arguments
key (string)
value (Object|string)
time (number: optional)
这是常规存储方法之间唯一真正的区别。获取,删除等工作相同。
如果您不需要那么多功能,您可以简单地存储一个带有值的时间戳(通过 JSON)并检查它是否过期。
值得注意的是,将本地存储留给用户是有充分理由的。但是,当您需要存储极其临时的数据时,lscache 之类的东西确实会派上用场。
Brynner Ferreira 提出了一个很好的观点:在到期信息所在的位置存储同级密钥。这样,如果您有大量键,或者您的值是大型 Json 对象,则不需要解析它们来访问时间戳。
下面是一个改进的版本:
/* removeStorage: removes a key from localStorage and its sibling expiracy key
params:
key <string> : localStorage key to remove
returns:
<boolean> : telling if operation succeeded
*/
function removeStorage(name) {
try {
localStorage.removeItem(name);
localStorage.removeItem(name + '_expiresIn');
} catch(e) {
console.log('removeStorage: Error removing key ['+ key + '] from localStorage: ' + JSON.stringify(e) );
return false;
}
return true;
}
/* getStorage: retrieves a key from localStorage previously set with setStorage().
params:
key <string> : localStorage key
returns:
<string> : value of localStorage key
null : in case of expired key or failure
*/
function getStorage(key) {
var now = Date.now(); //epoch time, lets deal only with integer
// set expiration for storage
var expiresIn = localStorage.getItem(key+'_expiresIn');
if (expiresIn===undefined || expiresIn===null) { expiresIn = 0; }
if (expiresIn < now) {// Expired
removeStorage(key);
return null;
} else {
try {
var value = localStorage.getItem(key);
return value;
} catch(e) {
console.log('getStorage: Error reading key ['+ key + '] from localStorage: ' + JSON.stringify(e) );
return null;
}
}
}
/* setStorage: writes a key into localStorage setting a expire time
params:
key <string> : localStorage key
value <string> : localStorage value
expires <number> : number of seconds from now to expire the key
returns:
<boolean> : telling if operation succeeded
*/
function setStorage(key, value, expires) {
if (expires===undefined || expires===null) {
expires = (24*60*60); // default: seconds for 1 day
} else {
expires = Math.abs(expires); //make sure it's positive
}
var now = Date.now(); //millisecs since epoch time, lets deal only with integer
var schedule = now + expires*1000;
try {
localStorage.setItem(key, value);
localStorage.setItem(key + '_expiresIn', schedule);
} catch(e) {
console.log('setStorage: Error setting key ['+ key + '] in localStorage: ' + JSON.stringify(e) );
return false;
}
return true;
}
虽然本地存储不提供过期机制,但 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 相同的到期参数来完成更大的存储大小.