JavaScript Client-Side Data Storage of Web Browsers

Reading Time: 2 minutes

The Web Storage API is a set of mechanisms that enable browsers to store key-value pairs. It is designed to be much more intuitive than using cookies. The key-value pairs represent data storage objects, which are similar to objects except they remain intact during page loads, and are always strings.

By storing data on the browser itself, you can skip fetching information from the server every time the user needs it.
Here we discuss how to storing data using JavaScript.

Types of Client-Side Storage

Cookies
Local Storage/Web Storage
IndexedDB
Cache API
File system storage

1- Cookies

JavaScript can create, read, and delete cookies with the document.cookie property.

document.cookie = "username=Sumith Harshan";

You can set expiry date in UTC time.

document.cookie = "username=Sumith Harshan; expires=Thu, 10 Dec 2022 12:00:00 UTC";

Get Cookie value

let x = document.cookie;

Delete a Cookie by adding expires parameter to a past date.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

2- Local Storage/Web Storage

Web Storage provides two similar APIs to define name/value pairs.
1- window.localStorage : store persistent data
2- window.sessionStorage : retain session-only data

We can store or update named items with .setItem() method.

localStorage.setItem('userid', 3452);
localStorage.setItem('username', 'Sumith');

Get date using .getItem() method.

localStorage.getItem('userid');

Delete using .removeItem() method.

localStorage.removeItem('userid');

3- IndexedDB

IndexedDB is a database that is built into a browser, much more powerful than localStorage.
That power is usually excessive for traditional client-server apps. IndexedDB is intended for offline apps, to be combined with Service Workers and other technologies.

The basic pattern that IndexedDB encourages is the following:

Open a database.
Create an object store in the database.
Start a transaction and make a request to do some database operation. EX:adding or retrieving data.
Wait for the operation to complete by listening to the right kind of DOM event.
Do something with the results.

You can find more information from Mozilla.org website.
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

4- Cache API

The Cache API is a system for storing and retrieving network requests and their corresponding responses.
The Cache API is available in all modern browsers.

Cache API ships with several methods to perform.

Create a new cache
Add (update) items to a cache
Retrieve items from a cache
Delete items from a cache

// Create cache

const myCache = await caches.open('my-cache');

//Adding items to a cache: add | addAll | put methods

const options = {
  method: "GET",
  headers: new Headers({
    'Content-Type': 'text/html'
  }),
}
myCache.add(new Request('/today.json', options));

//Cache.addAll(): takes an array of Request objects or URLs (strings).

const urls = ['today.json', 'tomorrow.json'];
myCache.addAll(urls);

//Cache.put: allows you to store either a response from the network, or create and store your own Response

myCache.put('https://weather/tomorrow.json');

//Retrieving items from a cache

const request = '/today.json';
const response = await myCache.match(request);

//Removing items from a cache

const request = '/today.json';
newCache.delete(request);

//Deleting an existing cache

caches.delete('my-cache');

5- File system storage

The File and Directory Entries API simulates a local file system that web apps can navigate within and access files in.
When handling small data sets with arbitrary, probably unrelated data, file is more efficient than database. For simple operations, read, write, file operations are faster and simple.

You can find more information from here.
https://web.dev/file-system-access/