HTML local storage

When we write HTML, we must have some data to store. When we don't have a database to store, we can use local storage. There are several types of local storage: localstorage, sessionstorage. The usage of sessionStorage and localStorage is basically the same, and the value of reference type should be converted into JSON. Below we explain how to use it.

Let's talk about some of their parameters first

Advantages and disadvantages and features:
sessionStorage (temporary storage): maintains a storage area for each data source that exists during browser open, including page reloads
localStorage (long-term storage): the same as sessionStorage, but the data will still exist after the browser is closed

Let's compare:

Storing data:    
    sessionStorage.setItem('key', JSON.stringify(info));
    localStorage.setItem('key', JSON.stringify(info));

Where key is the name of the data we store, and the following parameters are the data we store

retrieve data:    
    var data1 = JSON.parse(sessionStorage.getItem('key'));
    var data2 = JSON.parse(localStorage.getItem('key'));

We can define a variable name to get the value

Delete a piece of data:

We can delete a piece of data stored locally:   
    sessionStorage.removeItem('key');
    localStorage.removeItem('key');

Delete all data:

  sessionStorage.clear();
  localStorage.clear();

The key() and length provided by sessionStorage and localStorage can easily implement stored data traversal, such as the following code

var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++)
{
var key = storage.key (i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}

This way we iterate over our stored data

Guess you like