Local Storage vs Session Storage vs Cookie

With Advent of Html5 , we have got various option to cache or store info on client browser. Previously we were having only cookies , which were very restrictive and size of cookies was very small. but now we local storage and session storage as well. and cookies has been talk of past , though it is getting used for various purposes. let's talk about all these

LocalStorage

localStorage is a way to store data on the client’s computer. It allows the saving of key/value pairs in a web browser and it stores data with no expiration date. localStorage can only be accessed via JavaScript, and HTML5. However, the user has the ability to clear the browser data/cache to erase all localStorage data.

Pros:

• stores data with no expiration date
• storage limit is about 5MB
• data is never transferred to the server

Cons:

• plaintext, hence not secure by design
• limited to string data, hence need to be serialized
• can only be read on client-side

So we see , we have key value storage, where we have key and value as an serialized object.

We can try localstorage api from console

and it will create a key value pair in localstorage store.

Session storage

• stores data only for a session, meaning that the data is stored until the browser (or tab) is closed
• data is never transferred to the server
• can only be read on client-side
• storage limit is about 5-10MB
• opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window

Same as localstorage , we can write key-value pair in session storage as well.

Cookie

• Stores data that has to be sent back to the server with subsequent XHR requests. Its expiration varies based on the type and the expiration duration can be set from either server-side or client-side .
• Cookies are primarily for server-side reading (can also be read on client-side), localStorage and sessionStorage can only be read on client-side.
• Size must be less than 4KB.
• Cookies can be made secure by setting the httpOnly flag as true for that cookie. This prevents client-side access to that cookie.

Cookies can be updated , set using document.cookie object from browser window object.

In chrome browser, by inspect element, we can go to application tab and see values which are in localStorage, Session Storage and Cookies.

So in nutshell