JavaScript Web Storage

In this article, we will talk about web storage which is an HTML5 feature that allows us to store data in key-value pairs in the browser.

It stores data on the client side so we can access it or change it later.

There are two types of web storage:

*local storage.

*session storage.

The local storage object allows us to store 5MB of data per app. with local storage the data will be saved in the browser and closing the browser won't affect it, it will stay the same unless we change it or delete it.

There are three main methods to manipulate data in local storage:

/*the setItem function will create a key called name and put raptor as a value for it or if it exists it will change it's value to raptor*/
localStorage.setItem("name", "raptor");
/*the getItem function will give us the value of the key that have the name "name" that stored in the browser  */
localStorage.getItem("name");
/*the removeItem function will delete an existed key that called "name" */
localStorage.removeItem("name");
/*the clear function will delete all the data that saved in the browser */
localStorage.clear();

The session storage object lets you save key-value pairs in the browser. but the difference is when closing the browser this type of data will be deleted.

/*the setItem function will create a key called name and put raptor as a value for it or if it exists it will change it's value to raptor*/
sessionStorage.setItem("name", "raptor");
/*the getItem function will give us the value of the key that have the name "name" that stored in the browser  */
sessionStorage.getItem("name");
/*the removeItem function will delete an existed key that called "name" */
sessionStorage.removeItem("name");
/*the clear function will delete all the data that saved in the browser */
sessionStorage.clear();