When should I use html5 sessionStorage?

Question

I've learned difference between sessionStorage (persist during session) and localStorage (persist forever if not deleted).

I can see that localStorage can be used as better version of cookie. (more size, not traveling to server for each HTTP request like cookie does).

But for sessionStorage, I'm thinking when should I use it effectively?

I thought about user inputs into text fields in pageA and then moves onto pageB within the same tab or browser window, pageB can look up sessionStorage.

I can't really expand my guess more than the scenario above. Could anyone tell me how can sessionStorage be used?

Answer 1

With ajax-driven dynamic interfaces, a lot of times there is nothing storing the current state of how the interface looks (like which tab is selected, for example). sessionStorage could be used to store the state of the interface, so when coming back to a page, you can restore the screen the way the user was looking at it.

Another use would be if several pages deep you are working on a single object, you could store the id like a global variable: currentInvoiceId.

User settings that are needed on every page, like a special layout or template, could be loaded once up front and put into sessionStorage for easy access.

Some things you only want the user to see once per login, like a news popup. You could store that they've seen it already in sessionStorage. This would also work for actions that you only want the user to do once per login.

It's a good alternative to passing data between pages using viewstate, hidden <input> fields, or URL parameters.

Answer 2

The main reason to use sessionStorage is for cases where if your user were to open the same page twice in two different tabs, you'd want separate storage areas for those two tabs. For example, consider a site where you're buying a ticket (and you can only buy one ticket, like an airline ticket flow, as opposed to a case with a shopping cart). If the user tries to buy two tickets in two different tabs, you wouldn't want the two sessions interfering with each other. sessionStorage lets you track those session across multiple page loads independently.