29

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?

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
Meow
  • 18,371
  • 52
  • 136
  • 180
  • Some related threads: https://stackoverflow.com/questions/26556749/binding-tab-specific-data-to-an-http-get-request https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies?rq=1 https://stackoverflow.com/questions/3259451/what-are-the-benefits-of-using-sessionstorage – Devin Rhode May 20 '21 at 19:19

3 Answers3

35

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.

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
  • 1
    Interesting, i can finally remove those ugly hidden input or div from HTML pages :) – Meow Dec 14 '11 at 02:56
  • 3
    Is there any good use for sessionStorage in single page apps where the state can be easily stored in memory (javascript object)? – Pau Fracés Apr 20 '16 at 14:19
  • @PauFracés Maybe just preserving state in case the browser crashes. Sucks to fill out a form, have your browser crash, and losing everything. – ThinkingStiff Apr 22 '16 at 00:00
  • 3
    @ThinkingStiff is sessionStorage preserved after browser crash? – Pau Fracés Apr 22 '16 at 13:26
  • 1
    In theory sessionStorage should be preserved after browser crash, but I can't recall last time chrome crashed on me. Probably most browsers are done crashing these days. – Devin Rhode May 20 '21 at 16:03
  • 1
    @PauFracés I too am trying to figure out the "real" and "proper" use cases for sessionStorage. I'm thinking it's ultimately best viewed as _just a cache_ and only good for "ephemeral" ui state/input data (like, stackoverflow comment boxes would be a good use case) – Devin Rhode May 20 '21 at 16:05
  • 4
    @DevinRhode Nowadays I'm using sessionStorage to store data that I want to be preserved in case the user reloads the page – Pau Fracés May 21 '21 at 08:23
  • _"want the user to see once per login"_ but this wouldn't really work with `sessonStorage` would it? If I open a new tab to the website (not by duplicating), I'd create a new session storage for it, and hence I'd once again see the popup or whatever it is that you wanted to show once per login (though I didn't login again). – ADTC Nov 10 '21 at 12:35
  • "To pass data between pages". That's what I needed – Matt Kleinsmith Sep 27 '22 at 19:51
22

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.

Ian Hickson
  • 8,174
  • 1
  • 29
  • 22
  • 1
    +1 like for your answer as I find it interesting. Could you please state the last line in a different way, I don't understand what this sentence is trying to say. – Pravin Poudel Apr 02 '20 at 09:19
0

I view sessionStorage as simply a "tiny per-tab cache", although it can be a fairly reliable cache.

Devin Rhode
  • 23,026
  • 8
  • 58
  • 72