How can I remove local storage after one hour?

user_5281051 0
Viewed 42324

My data is object

I save it use local storage javascript like this :

localStorage.setItem('storedData', JSON.stringify(data))

I just want to keep that data for 1 hour. So if it's been more than 1 hour then the data will be removed

I know to remove data like this :

localStorage.removeItem("storedData")

But how can I set it to auto delete after 1 hour?

local-storage html jquery javascript
9 Answers

Add the following code in your App.js file, then the localStorage will be cleared for every 1 hour

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);
    }
}
user_146604140

Use cookies instead

Cookies.set('foo_bar', 1, { expires: 1/24 })

user_38282150

Alternatively you can use IndexedDB in WebWorkers. What it basically means is you can create a parallel to your main thread JavaScript program, like this

var worker = new Worker('worker.js');

The advantage is when it finishes its work, and you don't have a reference to it, it gets cleaned up automatically. However, since I'm not fully sure about the above, here is The worker's lifetime from Living Standard

Workers communicate with other workers and with browsing contexts through message channels and their MessagePort objects.

Each WorkerGlobalScope object worker global scope has a list of the worker's ports, which consists of all the MessagePort objects that are entangled with another port and that have one (but only one) port owned by worker global scope. This list includes the implicit MessagePort in the case of dedicated workers.

Given an environment settings object o when creating or obtaining a worker, the relevant owner to add depends on the type of global object specified by o. If o specifies a global object that is a WorkerGlobalScope object (i.e., if we are creating a nested dedicated worker), then the relevant owner is that global object. Otherwise, o specifies a global object that is a Window object, and the relevant owner is the responsible document specified by o. A worker is said to be a permissible worker if its WorkerGlobalScope's owner set is not empty or:

  • its owner set has been empty for no more than a short implementation-defined timeout value,
  • its WorkerGlobalScope object is a SharedWorkerGlobalScope object (i.e., the worker is a shared worker), and
  • the user agent has a browsing context whose Document object is not completely loaded.

Another advantage is you can terminate a worker, like this

worker.terminate();

Also, it is worth mentioning

IndexedDB has built-in support for schema versions and upgrading via its IDBOpenDBRequest.onupgradeneeded() method; however, you still need to write your upgrade code in such a way that it can handle the user coming from a previous version (including a version with a bug).

user_12240720

This works for a SPA where the browser window doesn't reload on page renders:

Set an expiresIn field in your local storage. On window reload check to see if current time >= expiresIn if true clear localStorage items else carry on You can also do this check whenever your business logic requires it.

user_120666770

Just add the check in your app to check if the variable exists and then do a check on it. Put a unix timestamp on the variable, and compare that the next time the user visits your site.

user_74782260
Related