Differences between localStorage Vs sessionStorage?

Question

What are the differences, pros and cons between localStorage and sessionStorage?

Answer 1

Both localStorage and sessionStorage extend to Storage. There is no difference between them except for the nonpersistence of sessionStorage.

To nonpersistence as described above is in the sense that sessionStorage is only available to the window that created the data until such window is closed, opening another window(or flap) such data will not be available.

In return for sessionStorage, when creating data in localStorage such data shall be available to any tab/window even if the user closes the window, restarts the system, etc.

An example, let’s assume that you want to save the username and password to perform a login, it is likely that you choose to store this data in sessionStorage for security reasons and save user settings in localStorage.

---

Utilize localStorage for long-term use and sessionStorage when you need to store something temporary(ie one-session data). Both are also scoped by browser manufacturers. So that storage data saved by IE cannot be read by Chrome or FF.

You can see a demonstration here.

References

_{1. localStorage vs. sessionStorage}

_{2. localStorage and sessionStorage}

Answer 2

sessionStorage - Is similar to a cookie that expires when you close the browser. it has the same extrusion as the localStorage, however there is no way to change your length of stay, whenever closing will be excluded.

localStorage - Is similar to a cookie, but it never expires, so long as there were records in the AppCache for that domain, the variable will exist (Unless the user creates a routine to remove it).

Both attributes were added by HTML5. The above items called web storage. But there are other forms of local storage through HTML5, as a database WebSQL, Indexed database (IndexDB), as well as conventional files (File Access).

Answer 3

I have separated some points that can be compared between localStorage, sessionStorage and cookies, since they can also be used for storage.

Initialization

Cookies can be defined both on the client side and on the server side using the header Set-Cookie while for the Localstorage and the Sessionstorage are only defined on the client side.

Expiry time

Cookies have the expiration time set manually, while localStorage has no expiration time and sessionStorage expires when leaving the tab in which it was populated.

Scope

Regarding the scope of the values, with cookies and localstorage the values are global, with the values sessionStorage can only be accessed in the tab in which they were defined.

Storage capacity

Finally, the storage capacity of cookies is 4kb while in sessionStorage and on locationStorage have a much larger capacity with 5MB in both.

References

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

https://tutorial.techaltum.com/local-and-session-storage.html

https://stackoverflow.com/questions/640938/what-is-the-maximum-size-of-a-web-browsers-cookies-key