Published on

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 through window.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.