html - 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.