- Published on
HTML Web Storage

HTML Web Storage
Web Storage
With web storage, web applications can store data locally within the user's browser.
What is HTML Web Storage?
Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.
There are different type of storage are available in browser based on type of data and expiry age. some of them are like Local Storage, Session Storage, Cookie, IndexedDB and WebSQL.
We are going to discuss each type of storage and their uses in details below:-
What is Local Storage?
- Key-value storage that stores values as strings and
localStorage
object accessible throughwindow.localStorage
localStorage
persists even if the browser is closed and reopened.- Stores data with no expiration date, so it gets removed through clearing the Browser cache and using
javascript
. - This has the maximum storage limit amongst all Up to 10MB.
- Follow the same-origin policy, which means the Protocol(Http/Https), port and the host are the same. Only scripts of the same origin can access LocalStorge data
Use case of Local Storage
- Can be use to store user-related data
- Can be use to store data which are not changing frequently
localStorage.setItem(“key”, “value”)
localStorage.getItem(“key”)
localStorage.removeItem(“key”)
What is Session Storage?
sessionStorage
stores data for only one session it means, as long as the browser is open, including page reloads and restores- Data is never transferred to the server.
- Storage limit is at most 5MB and its larger than cookie.
- Follow the same-origin policy and is bound to a tab
Use case of Session Storage
- Can be used to store session related data like language selection or track multi step process that must be completed in single session like booking hotel, flight etc.
What is Cookies?
- Key-value storage that stores values as string
- Have expiration time, if no expiration time is given then the cookie will get expired at the end of the browser session.
- Send to server for every request and follow same-origin policy
What is the use case of Cookies?
- Session management: Server can get data from cookie to track session status.
- Personalization: Customized advertising is the main way cookies are used to personalize your sessions
- Tracking: Shopping sites use cookies to track items users previously viewed, allowing the sites to suggest other items based on search.
What is IndexedDB?
- Can store both objects and key-value pairs
- IndexedDB is a NoSQL system
- Storage limit up to 5MB varies from browser to browser
- IndexedDB API is asynchronous, unlike local storage and session storage. IndexedDB operations are event-driven by various events like onsuccess, onerror, oncomplete etc.
- Follow the same-origin policy
- Do not have expiration time (persistent storage) unless explicit deletion
- In window you can access IndexDB object using
window.indexdb
Use case of IndexedDB
- The use cases for IndexDB is when we need send data to server and network is poor or taking too much time to upload, in that case we can use IndexDB to store value and then send it to server
- It also used for offline data storage and when user comes online data can be send to server
What isWebSQL?
- Deprecated by W3C
- Can be accessed using SQL statements.
- Follow same-origin policy
- Persistent storage unless explicit deletion
Conclusion
The major difference between Local Storage and Session Storage is that Session Storage only survives within one session, and it expires when the tab or window is closed, however Local Storage can persist multiple sessions on web browser until explicit deletion.For Cookie, it is sent to the server for every request, but for Local Storage and Session Storage they are only for client-side usage, not sent to the server.
Additional Information
If you want to learn more about the slight but important differences between Cookies, Session, and Local storage, check out the docs located here.