Data storage in the Web

Web Storage API is a very important part of programming that allows us to save and access data on and from our browsers. These sets of data that are being stored are our browser history, login credentials (this can be risky) and other important string data. Depending on how much data is stored, web storage is responsible for the load time of our browsers when we re-open them, and also allows us the opportunity of fetching these data from the storage system of our browsers without connecting to the internet. The web storage stores data in key/value pairs, and has some string-like methods that can be called on them.

There are 3 major types of storage systems. Let's dive into them.

1 . LocalStorage: This storage system is used to store persistent data. These data can be accessed on other windows so long as the windows are on the same origin (domain/port/protocol), even when the URL paths are different. LocalStorage saves data for however long the user wants; months or years except the user deletes the data or clears their browser history. Even when the browser is closed, or the computer shut down, the data will still be available in the local storage.

Let's see some of the methods that work on localStorage, and how they work.

Saving Data on LocalStorage: To save data on localStorage, the data will be saved with key/value pairs inside the setItem method. The setItem method is saved with 2 parameters. The first parameter is the key. The key here is the name of the data being saved. The second parameter is the value of the data being saved, hence completing the pair.

localStorage.setItem('test', 'this is our first data')

Retrieving Data on Local Storage: To retrieve data on localStorage, we will access the data by using the key used to save the data. So for our example above, here is how to retrieve the data.

localStorage.getItem('test')

The output of test will be

this is our first data

.

Deleting Data on LocalStorage: Like every data that can be saved and retrieved, data on localStorage can also be deleted. To delete data on localStorage, you run the delete method.

localStorage.removeItem('test')

2 . SessionStorage: There isn't much difference between localStorage and sessionStorage. On sessionStorage, data isn't persistent, and unlike localStorage, once the window is shut down or if the browser is closed, the data would not be available anymore. Like its name, it only saves data for a session. The data saved only lasts for as long as the tab is open. Once the tab is closed, the data is lost.

The same properties and methods used on sessionStorage work on localStorage.

sessionStorage.setItem(): This method saves data on the sessionStorage. Let's use this example to see how it works.

sessionStorage.setItem('test', 'This is session storage')

sessionStorage.getItem(): This helps you to retrieve data from the session storage. The example below will help us retrieve the data with the key test.

sessionStorage.getItem('test')

The output of the above will be

This is session storage

.

sessionStorage.removeItem(): This helps to remove or delete data from the list. If there are several lists of data, the data with the key test will be removed from the list.

sessionStorage.removeItem('test')

sessionStorage.clear(): This method clears all the keys in the session storage regardless of the key. If there are 5 lists of data, this method will clear every single one of them.

If you think this was helpful, you can Follow me and like the article. It will encourage me to write more articles like this.

Ciao.