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
?
Session Storage is a global object that maintains a storage area that's available for the duration of the page session. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated.
The sessionStorage object stores data only for a session. It means that the data stored in the sessionStorage will be deleted when the browser is closed. A page session lasts as long as the web browser is open and survives over the page refresh.
localStorage is similar to sessionStorage , except that while localStorage data has no expiration time, sessionStorage data gets cleared when the page session ends — that is, when the page is closed.
Use SessionStorage instead. It gets cleared off whenever the tab is closed.
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).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With