Local Storage with Expiration

Question

How can I set an expiration time on a specific local storage variable?

Example: If I have a page disclaimer and once the user clicks "accept" I store a certain variable in the local storage. However after 12 hours, I want it to get deleted and ask the user to accept again.

I don't want to store the variable in session storage, because the disclaimer will prompt every time the user opens a new tab.

Cookies would be another solution, but I rather not use it if possible.

Thanks!

Answer 1

There's no built-in way to expire values in storage. One solution is to store a timestamp, then in each visit compare the stored time (if there is one) against the local time to determine if the value has expired. Example:

const expirationDuration = 1000 * 60 * 60 * 12; // 12 hours

const prevAccepted = localStorage.getItem("accepted");
const currentTime = new Date().getTime();

const notAccepted = prevAccepted == undefined;
const prevAcceptedExpired = prevAccepted != undefined && currentTime - prevAccepted > expirationDuration;
if (notAccepted || prevAcceptedExpired) {
  alert("Disclaimer: ...");
  localStorage.setItem("accepted", currentTime);
}

Answer 2

I strongly recommend the usage of lscache. Just include this 2.5kb JS into your APP or per CDN. Its highly configurable and usage its pretty easy. It supports strings or objects.

If (lscache.get('myVar') === null) {
  alert('time exceeded')
  //set variable which will expire in 3 days
  lscache.set('myVar', true, (60*24*3))
}