Local Storage - the longer game
localStorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date. This means the data stored in the browser will persist even after the browser window is closed. To save an item to Local Storage, you can use the method localStorage.setItem(key, value). This method must be handed a key and a value. also, the client can decide what goes into local storage. Below there is a video that shows how we can use Local Storage Property.
Session Storage - the short game
Session Storage is a new feature introduced in HTML5 that allows you to store data locally in the user’s browser. Unlike cookies, data stored in session storage is specific to the site on which it was created and data is not shared with other sites. Session Storage is unique to each browser tab. If you open a new tab and navigate to the same site, you’ll start a new session with its storage. Session storage only keeps data for a particular session. To save an item to session storage, you can use the method sessionStorage.setItem(key, value).
Cookies - the frequent game
Cookies are small files of information that a web server generates and sends to a web browser. Web browsers store the cookies they receive for a predetermined period, or the length of a user’s session on a website. Cookies are used to identify specific users and improve your web browsing experience. Data stored in a cookie is created by the server upon your connection. This data is labeled with an ID unique to you and your computer. When the cookie is exchanged between your computer and the network server, the server reads it and knows what you want. Developers can push things to cookies by using JavaScript code. The maximum size of a cookie is 4093 bytes. If you want to support most browsers, then do not exceed 50 cookies per domain.
Difference between all three
Local Storage : The storage capacity of local storage is up to 10 MB - The client can only read local storage - Local storage value can be shared between multiple windows of the same browser easily
Session Storage : The storage capacity of session storage is up to 5 MB - The client can only read session storage - It’s session-based and works per window or tab, this means that data is stored only for the duration of a session, i.e. until the browser (or tab) is closed
Cookies : The storage capacity of Cookies is 4KB - Both clients and servers can read and write cookies - Cookies expire based on the setting and working per tab and window
What happens when session storage and local storage get filled entirely
If storage is full when you try to add something to it, according to the specification the method that’s adding the new/updated item must throw a QuotaExceededError. So your app/page will work just fine if storage is full but if it tries to add anything, that action will fail with an error.
Use Cases of LS - SS - Cookies
Local Storage : Saving user preferences such as theme, language, etc. - Storing data for offline use - Storing data for faster load times - Storing data for faster form-filling - Storing data for faster search results
Session Storage : Storing data temporarily while a user is browsing a website - Storing data temporarily while a user is filling out a form - Storing data temporarily while a user is taking a quiz or survey - Storing data temporarily while a user is playing a game
Cookies : Remembering user preferences such as login information - Tracking user behavior across multiple websites - Personalizing content based on user behavior - Saving shopping cart information