16

I have a simple HTML5 App that I am currently working on and I'm wondering if it's possible to remove a item in HTML5 Local Storage after a period of time, like: after 24 hours, remove this item, etc.

I'm thinking that Date Object built into JavaScript would probably be what I need.

Is this possible? Some code examples would be nice if you could, thanks!

4 Answers 4

22

You could store the date along with the data

//add data we are interested in tracking to an array var values = new Array(); var oneday = new Date(); oneday.setHours(oneday.getHours() + 24); //one day from now values.push("hello world"); values.push(oneday); try { localStorage.setItem(0, values.join(";")); } catch (e) { } //check if past expiration date var values = localStorage.getItem(0).split(";"); if (values[1] < new Date()) { localStorage.removeItem(0); } 
Sign up to request clarification or add additional context in comments.

2 Comments

I like this solution however I think it should be noted for this particular example that values[1] needs to be parsed into a Date object before its compared. Like this new Date(values[1])
The date is taken from the user's OS and if the user had tampered with the OS's date settings than he will bypass this
4

Use This Solution:

(function () { var lastclear = localStorage.getItem('lastclear'), time_now = (new Date()).getTime(); // .getTime() returns milliseconds so 1000 * 60 * 60 * 24 = 24 days if ((time_now - lastclear) > 1000 * 60 * 60 * 24) { localStorage.clear(); localStorage.setItem('lastclear', time_now); } })(); 

2 Comments

who need to stay?! It's check you localStorage if you visit the site in the last X time and remove it if it's bigger.
I think you mean 1000 * 60 * 60 * 24 = 24 hours not 24 days
1

If you want to do this I think you basically have to do it manually. For example, you could store the timestamp in a localStorage slot alongside each value you're storing, and then check the timestamp against the current time at some regular interval like page load or setTimeout or something.

Example:

//this function sets the value, and marks the timestamp function setNewVal(prop) { window.localStorage[prop] = Math.random(); window.localStorage[prop+"timestamp"] = new Date(); } //this function checks to see which ones need refreshing function someRucurringFunction() { //check each property in localStorage for (var prop in window.localStorage) { //if the property name contains the string "timestamp" if (prop.indexOf("timestamp") != -1) { //get date objects var timestamp = new Date(window.localStorage[prop]); var currentTime = new Date(); //currently set to 30 days, 12 hours, 1 min, 1s (don't set to 0!) var maxAge = (1000 * 1) *//s (60 * 1) *//m (60 * 12) *//h (24 * 30); //d if ((currentTime - timestamp) > maxAge) {//if the property is too old (yes, this really does work!) //get the string of the real property (this prop - "timestamp") var propString = prop.replace("timestamp",""); //send it to some function that sets a new value setNewVal(propString); } } } } //set the loop window.setInterval(someRucurringFunction,(1000*60*60); 

EDIT: mrtsherman's method would totally work as well. Similarly, you could enter the timestamp as a property of an object you might be storing/retrieving with JSON.stringify/parse(). If either the array or the object are very large, or you have very many of them, I'd probably suggest using the parallel property method for efficiency, though.

1 Comment

You should use (new Date).getTime() when storing in localhost and comparing
-6
window.setInterval(function () { localStorage.setItem('nicwincount', 0); },8640000); //24 * 60mins * 60sec 

ps: nicwincount is a localstorage you set before. localStorage.setItem('feeds', Ext.encode(feeds));

hope can help you.

1 Comment

Doesn't this assume the device remains on the page for 24 hours? Unlikely! ;-)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.