Expiration of sessionStorage

Question

I am building a form in which I have to store the data in HTML5's sessionStorage I don't know when the sessionStorage expires. Can anyone tell me about the expiration time of the sessionStorage?

Answer 1

It lives and dies with your browser session and is not shared between tabs. It doesn't expire automatically. So if you never close your browser it never expires.

So when the tab/window is closed the data is lost.

Each sessionstorage area is allowed 5MB of storage (in some browsers 10MB). Whereas cookies only allow 4kb (or more in some browsers). Cookies however have a set expiration date.

As Christophe wrote in the comments, localstorage never expires. It's also shared across tabs and is the same size as sessionstorage (5MB).

Answer 2

I know this question is pretty old but I will post my answer if someone else stumbles upon this and finds it helpful. You can pretty much simulate sessionStorage or locaStorage expiration with something like this:

//In your login logic or whatever
var expires = new Date(year, month, day, hours, minutes, seconds, milliseconds);
var sessionObject = {
    expiresAt: expires,
    someOtherSessionData: {
        username: ''
    }
}
sessionStorage.setItem('sessionObject', JSON.stringify(sessionObject));

You can also encrypt this object by using something like http://bitwiseshiftleft.github.io/sjcl/ if you don't want this session object to be in clear.

On every page load you can check if the sessionStorage, or localStorage for that matter, is expired:

$(document).ready(function(){
    var currentDate = new Date();
    var sessionObject = JSON.parse(sessionStorage.getItem('sessionObject'));
    var expirationDate = sessionObject.expiresAt;
    if(Date.parse(currentDate) < Date.parse(expirationDate)) {
        //normal application behaviour => session is not expired
        var someAppVariable = sessionObject.someOtherSessionData.etc;
    } else {
        //redirect users to login page or whatever logic you have in your app 
        //and remove the sessionStorage because it will be set again by previous logic
        sessionStorage.removeItem('sessionObject');
        console.log('session expired');
    }
});

If you do not want users to be kept as logged in after the tab or browser closes use sessionStorage, otherwise you should use localStorage and manipulate it as you desire.

I hope someone will find this helpful.

Answer 3

You can add some kind of expiration mechanism with something like this :

// get from session (if the value expired it is destroyed)
function sessionGet(key) {
  let stringValue = window.sessionStorage.getItem(key)
    if (stringValue !== null) {
      let value = JSON.parse(stringValue)
        let expirationDate = new Date(value.expirationDate)
        if (expirationDate > new Date()) {
          return value.value
        } else {
          window.sessionStorage.removeItem(key)
        }
    }
    return null
}

// add into session
function sessionSet(key, value, expirationInMin = 10) {
  let expirationDate = new Date(new Date().getTime() + (60000 * expirationInMin))
    let newValue = {
    value: value,
    expirationDate: expirationDate.toISOString()
  }
  window.sessionStorage.setItem(key, JSON.stringify(newValue))
}

Answer 4

You can save expiration time in cookie. In every page loading read the cookie, if it's empty (means expired) then clear sessionstorage.