What is Web Storage API?

Web Storage API, which entered our lives with HTML5, is a feature that allows us to store data in the user's browser with the help of javaScript . In the past, we used to do these operations with Cookies. While access to cookies can be provided by the server and client , access to Web Storage can only be provided by the client. Although this may seem like a disadvantage for Web Storage, we actually get rid of the burden of sending cookies to the server at for every request made to the server. The fact that you can store 5MB of data in Web Storage makes it more attractive than Cookie.

We use Local Storage and Session Storage structures in Web Storage operations. I will give my examples over Local Storage in this article. Local Storage and Session Storage have almost the same features. While the data you write to Local Storage is protected unless you delete it, the data you write to Session Storage will be deleted when you close the browser.

İçerik

1. Saving data to Local Storage
2. Data extraction from Local Storage with key
3. Retrieving data from Local Storage with index number
4. Deleting data from Local Storage with key
5. Delete all data saved in Local Storage
6. Saving an object to Local Storage
7. Retrieve object from Local Storage
8. Return all data saved in Local Storage

Saving data to Local Storage

As can be seen below, we use the localStorage.setItem(key, value) method to add data to Local Storage.

localStorage.setItem('name', 'Birol');
localStorage.setItem('surname', 'Apaydın');
localStorage.setItem('age', 33);          

Data extraction from Local Storage with key

We retrieve the data we added to Local Storage using the localStorage.getItem(key) method.

var name = localStorage.getItem('name');
var surname = localStorage.getItem('surname');
var companyName = localStorage.getItem('age');         

Retrieving data from Local Storage with index number

We can retrieve the key of the data we added to Local Storage with the localStorage.key(index) method according to the order of addition . We again use the key we get from here in the localStorage.getItem(key) method to retrieve the data.

var name = localStorage.getItem(localStorage.key(0));
var surname = localStorage.getItem(localStorage.key(1));
var companyName = localStorage.getItem(localStorage.key(2));         

Deleting data from Local Storage with key

We use the localStorage.removeItem(key) method to delete data from Local Storage one by one.

localStorage.removeItem('name');
localStorage.removeItem('surname');
localStorage.removeItem('age');         

Delete all data saved in Local Storage

We use the localStorage.clear() method to delete all data stored in Local Storage.

localStorage.clear();

Saving an object to Local Storage

We convert our object to JSON format with the JSON.stringify(object) method and save it to Local Storage with the localStorage.setItem(key, value) method.

var user = { name: "Birol", surname: "Apaydın", age: 33};
localStorage.setItem('user', JSON.stringify(user));         

Retrieve object from Local Storage

We retrieve the data we added to Local Storage using the localStorage.getItem(key) method.

var user = JSON.parse(localStorage.getItem('user'));

Return all data saved in Local Storage

We learn how many data are stored in Local Storage by localStorage.length, we use the number we get in the for loop, we find the keys with localStorage.key(index) and we retrieve our data by giving these keys to the localStorage.getItem(key) method.

for (var i = 0; i < localStorage.length; i++){
    console.log('Anahtar: ' + localStorage.key(i), 'Değer: ' + localStorage.getItem(localStorage.key(i)));
}