📚Local Storage vs Session Storage vs Cookies

Different between Local storage vs Session Storage vs Cookies

Local Storage

Local Storage is the storage that store the value in key-value format. The data will be persist forever until this storage was cleared manually. Although we close the tabs/windows or shutdown computer the data still persist in local storage . In additionally this data is able to share for all tab/windows (but need to be same website).

Example

Website A (Tab1) -> Can access local storage A
Website A (Tab2) -> Can access local storage A
Website B (Tab1) -> Can't access 
Website B (Tab2) -> Can't access 
Website C (Tab1) -> Can't access 

Session Storage

Session Storage is similar to Local Storage but in contrast it is not able to share the data across tabs/windows . (This storage take place in the Html version 5 that make the system is more secure). Data will be persist until we close tab or window (after close the data will be cleared) .

Example

Website A (Tab1) -> Can access local storage A
Website A (Tab2) -> Can't access local storage

Cookies

Cookies is the storage that store the value in the user's computer so when we turn off the computer or close the browser/tab then the data still be exist like Local Storage. Likewise the website is not able to access the cookie of the other site. Cookie require to have expire date for storing data If you do not determine it then data will be clear when we close tabs/windows. The data is able to share for all tabs/windows (but need to be same website). There are 2 things between Local Storage and Cookies that is difference.

(1) Life Time (Cookie require expired date)

(2) Cookies can access in both client side and server side but Local Storage can access only client side. After we create the Cookies for website , everytime we request to server from browser then browser will automatically assign the Cookies in http header for http request .

(3) Cookies allow to set this 3 important field 1. HttpOnly (Set to true/false) -> this is the flag that allow only server side can access the data inside cookie 2. Secure (Set to true/false) -> this flag require https protocol to send the cookie 3. MaxAge (Set 20 seconds) -> this flag allow to set the time that cookie will be stored More about Cookies you can reference and read in this document: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie