HTML5本地存储中的项目何时到期？
在localStorage（作为HTML5的DOM存储的一部分）中存储数据的时间有多长？ 我可以为我放入localStorage的数据设置过期时间吗？
根据约翰Resig，不可能指定到期。 这完全取决于用户。
http://ejohn.org/blog/dom-storage/
编辑 – 显然，如果它自己的应用程序太旧，可以主动删除它们。 也就是说，您可以明确地在保存的内容中包含某种时间戳，然后稍后使用它来决定是否刷新信息。
我build议将时间戳存储在您存储在localStorage中的对象中
var object = {value: "value", timestamp: new Date().getTime()} localStorage.setItem("key", JSON.stringify(object)); 您可以parsing对象，获取时间戳并与当前date进行比较，并在必要时更新对象的值。
var object = JSON.parse(localStorage.getItem("key")), dateString = object.timestamp, now = new Date().getTime().toString(); compareTime(dateString, now); //to implement
你可以使用lscache 。 它会自动处理这个问题，包括存储大小超出限制的情况。 如果发生这种情况，它会开始修剪最接近其指定期限的项目。
readme ：
lscache.set Stores the value in localStorage. Expires after specified number of minutes. Arguments key (string) value (Object|string) time (number: optional)
这是常规存储方法之间唯一真正的区别。 获取，删除等工作是一样的。
如果你不需要太多的function，你可以简单地存储一个时间戳（通过JSON）的值，并检查它是否到期。
值得注意的是，为什么本地存储留给用户呢？ 但是，当需要存储极其临时的数据时，像lscache这样的东西确实派上用场。
虽然本地存储不提供到期机制，但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
本示例将在浏览器closures时将默认参数设置为过期的cookie。 因此，当浏览器closures并重新打开时，your_data的本地数据存储将被服务器端调用刷新。
请注意，这与删除本地数据存储不完全相同，只是在cookie过期时更新本地数据存储。 但是，如果您的主要目标是能够存储超过4K客户端（cookie大小的限制），则Cookie和本地存储的配对将有助于您使用与cookie相同的过期参数来完成更大的存储大小。
Brynner Ferreira带来了一个很好的观点：存储过期信息所在的同级密钥。 这样， 如果你有大量的键，或者如果你的值是大Json对象 ，你不需要parsing它们来访问时间戳。
这里遵循一个改进版本：
/* 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; }
生命周期由应用程序/用户控制。
从标准 ：
用户代理只能出于安全原因或在用户请求时从本地存储区域中过期数据。 用户代理应始终避免在可以访问该数据的脚本正在运行时删除数据。
来自W3C草案：
用户代理只能出于安全原因或在用户请求时从本地存储区域中过期数据。 用户代理应始终避免在可以访问该数据的脚本正在运行时删除数据。
你会想使用setItem（key，value）在你的日程安排上进行更新。 将使用新数据添加或更新给定密钥。
// 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); } }
这里强烈build议使用sessionStorage
- 它与localStorage一样，但会话销毁/浏览器closures时销毁
- sessionStorage对于减lesscookie的networkingstream量也很有用
为设定值使用
sessionStorage.setItem("key","my value");
为了获得价值的使用
var value = sessionStorage.getItem("key");
点击这里查看API
所有的方式设置
sessionStorage.key = "my val"; sessionStorage["key"] = "my val"; sessionStorage.setItem("key","my value");
所有的方式获取是
var value = sessionStorage.key; var value = sessionStorage["key"]; var value = sessionStorage.getItem("key");
如果有人使用jQuery的jStorage Plugin，那么可以使用setTTL函数添加过期if jStorage插件
$.jStorage.set('myLocalVar', "some value"); $.jStorage.setTTL("myLocalVar", 24*60*60*1000); // 24 Hr.
使用angular和localforage的解决方法：
angular.module('app').service('cacheService', function() { return { set: function(key, value, expireTimeInSeconds) { return localforage.setItem(key, { data: value, timestamp: new Date().getTime(), expireTimeInMilliseconds: expireTimeInSeconds * 1000 }) }, get: function(key) { return localforage.getItem(key).then(function(item) { if(!item || new Date().getTime() > (item.timestamp + item.expireTimeInMilliseconds)) { return null } else { return item.data } }) } } })
在我看来，@ sebarmeli的方法是最好的，但是如果你只想要数据持续一个会话的生命，那么sessionStorage可能是一个更好的select：
这是一个全局对象（sessionStorage），它维护在页面会话期间可用的存储区域。 只要浏览器处于打开状态，页面会话就会持续下去，并在页面重新加载和恢复时继续存在。 在新选项卡或窗口中打开页面将导致启动新的会话。
MDN：sessionStorage
为了search者的利益：
像Fernando一样，当存储的值很简单时，我不想添加json负载。 我只需要跟踪一些用户界面的交互，并保持数据的相关性（例如，用户如何使用电子商务网站之前检查）。
这不会满足每个人的标准，但希望是一个快速复制+粘贴起动器的人和保存添加另一个库。
注意：如果您需要单独检索项目，这将不是很好。
// Addition if(window.localStorage){ localStorage.setItem('myapp-' + new Date().getTime(), 'my value'); } // Removal of all expired items if(window.localStorage){ // two mins - (1000 * 60 * 20) would be 20 mins var expiryTime = new Date().getTime() - (1000 * 60 * 2); var deleteRows = []; for(var i=0; i < localStorage.length; i++){ var key = localStorage.key(i); var partsArray = key.split('-'); // The last value will be a timestamp var lastRow = partsArray[partsArray.length - 1]; if(lastRow && parseInt(lastRow) < expiryTime){ deleteRows.push(key); } } // delete old data for(var j=0; j < deleteRows.length; j++){ localStorage.removeItem(deleteRows[j]); } }
如果任何人仍然在寻找一个快速的解决scheme，并不想像jquery等依赖关系，我写了一个迷你图书馆，本地/会议/自定义存储添加到期，你可以在这里find它的源代码：
它的工作..个人经验..
setTimeout(function(){ localStorage.clear(); }, 10000);
你可以在jsp中混合java和javascript。 这是我的逻辑
//Setting Expiry date after 1 month <% int no_of_days =30; Date dNow = new Date(); SimpleDateFormat ft = new SimpleDateFormat("dd-MM-yyyy"); Calendar cal = Calendar.getInstance(); cal.add(Calendar.DATE, no_of_days); Date dateAfter1Month= cal.getTime(); String fromDate = ft.format(dateAfter1Month); %> var expiryDate = "<%=fromDate%>"; localStorage.setItem("expiry",expiryDate); //Checking Date is matching <% Date dNow = new Date(); SimpleDateFormat ft = new SimpleDateFormat("dd-MM-yyyy"); String curDate = ft.format(dNow); %> var curDate = "<%=curDate%>"; var expiryDate=localStorage.getItem("expiry"); if(curDate=expiryDate){ localStorage.removeItem("expiry"); }
