Storing data on the client(web browser) is useful to improve the performance of a website. Web browsers are having quite a number of methods to store data on the browser.
Types of Storage-
- LocalStorage
- SessionStorage
- Cookies
- IndexedDB
- Web SQL
LocalStorage
The localStorage is provided by the window interface. All the pages of the origin can access the localStorage. It comes with no expiration date, it can only be removed by the localStorage API or manually deleting it. The LocalStorage can store up to 5 MB of data. LocalStorage cannot be accessed by the server, it can only be fetched and changed on the client.
This is usually preferred to store user preferences like the theme, login state.
APIs provided by LocalStorage
// this sets an key name with value as Rohit
localStorage.setItem('name', 'Rohit');
// this will fetch the name key from localStorage
const name = localStorage.getItem('name');
// this will remove the name key from LocalStorage
localStorage.removeItem('name');
// this will remove all localStorage Items
localStorage.clear(); .
SessionStorage
The SessionStorage API is similar to LocalStorage, the only difference is that SessionStorage object data would be deleted once the current tab is closed. SessionStorage persists on reload.
APIs provided by SessionStorage
// this sets an key name with value as Rohit
sessionStorage.setItem('name', 'Rohit');
// this will fetch the name key from SessionStorage
let data = sessionStorage.getItem('name');
// this will remove the name key from SessionStorage
sessionStorage.removeItem('name');
// this will remove all localStorage Items
sessionStorage.clear();
Cookies
Cookies are small text files stored on the user's machine by the website. They are having a maximum size of 4KB. Before LocalStorage and SessionStorage were introduced, Cookies were the preferred method for storing data on the client. An advantage of cookies is that they can be accessed on the server side also. Cookies were used to store a user login state, improving user experience.
There are two types of Cookies
- Persistent Cookie - In this type of Cookie, we can specify the expiry or the validity of the cookie. Cookies can be accessed across
- Session Cookie - This is similar to SessionStorage, this does not specify an expiration date or time, whereas gets cleared once the tab/Session is closed.
// Creating a Cookie
document.cookie = "name=rohit"
Cookies can also have attributes like Expiry Date, Max Age, Path.
//Creating cookie with expires attribute
document.cookie = "name=rohit; expires=12 June 2022 08:12:45 UTC; path=/'"
//Creating cookie with max-age attribute for 5 minutes as age.
document.cookie= "name=Rohit;path=/;max-age="+5*60+";";
There are also other attributes like path, Secure, HttpOnly, Domain, etc. Additional resources are listed in the references section.
IndexedDB
IndexedDB is a great storage method for storing large amounts of structured data on the client, this is quite useful for storing information and making the website accessible in offline mode also. IndexedDB is a javascript-based object-oriented database. It allows storing and retrieving data using indexes as keys. IndexedDB can also Store images, videos, and files.
More information about IndexedDB is provided in the References section
Web SQL Database
Web SQL is based on relational databases like SQL lite. Open databases, and transactions are some of the basic methods. But the Web SQL API is deprecated and is not a part of HTML5 specification, so it is not recommended to use. IndexedDB is preferred over Web SQL.