loading...

Differences between client-side storage solutions

klaffert profile image Kelliann Lafferty ・1 min read

Question:

What are cookies, local storage and session storage and what are some differences?

Answer:

All three of these are client-side storage solutions (i.e. a cookie is both client and server-side) that can be used to store data that is needed within client scripts between pages.

Type Description Differences Uses
Cookies Small piece of data that a server sends to the user's browser that is then stored and sent back with future requests to the same server 4KB Storage - Server and client side reading - Supported by older browsers - Expiration varies Logins, shopping carts, game scores, user preferences, tracking user behavior
LocalStorage Window property (window.localStorage) that is saved across browser sessions. The data stored is not sent back to the server with each HTTP request, reducing traffic between client and server 5MB/10MB storage - Not as supported by older browsers - Never expires or removed, unless explicitly done so Login forms remembering username, user preferences, custom settings
SessionStorage Similar to LocalStorage, however, data does not persist across browsers. Data is only available during the page session. 5MB - Data will be deleted after session (browser) closed - Not as supported by older browsers Use in cases where you do not want the data to persist over time

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#:~:text=An%20HTTP%20cookie%20(web%20cookie,logged%2Din%2C%20for%20example.

https://www.w3schools.com/jsref/prop_win_sessionstorage.asp

https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies

Posted on Dec 22 '19 by:

klaffert profile

Kelliann Lafferty

@klaffert

Frontend Developer | UX Enthusiast | Tech for Good

Discussion

markdown guide