The Storage interface is used by scripts to save data in the browser. Two objects deploy this interface: window.sessionStorage and window.localStorage. SessionStorage stores data for a session of the browser. When the session ends (usually the window closes), the data is cleared. The data stored in localStorage exists for a long time. The next time you visit the site, the web page can directly read the previously saved data. The two objects are identical except for the length of the retention period. Properties and Methods The Storage interface has only one property storage. length: Returns the number of saved data items.

window.localStorage.setItem('foo'.'a');
window.localStorage.setItem('bar'.'b');
window.localStorage.setItem('baz'.'c');
window.localStorage.length / / 3
Copy the code

The storage.setitem () method is used to store data. It takes two parameters, the first is the key name and the second is the saved data. The second is the saved data. If the key name already exists, the method will update the existing key value. The method does not return a value.

window.sessionStorage.setItem('key'.'value');
window.localStorage.setItem('key'.'value');
Copy the code

Note that both arguments to storage.setitem () are strings. If it is not a string, it is automatically converted to a string and stored in the browser. window.sessionStorage.setItem(3,{ foo:1}); Window. The sessionStorage. The getItem (‘ 3 ‘) / / “[object object]” the following three methods equivalent:

// The following three expressions are equivalent
window.localStorage.foo ='123';
window.localStorage['foo'] ='123';
window.localStorage.setItem('foo'.'123');

Copy the code

Where foo is the key name and 123 is the stored value.

Storage.getItem()

Is used to read data. It has only one argument, the key name, and returns NULL if the key name does not exist. Window. The sessionStorage. The getItem (‘ key ‘) window. LocalStorage. The getItem () ‘key’ key name should be a string, or you will automatically be converted to a string.

Storage.removeItem()

The clear key () method is used to clear the value of a key name. It accepts the key name as an argument, and if the key name is not present, the method does nothing.

Storage.clear()

The storage.clear () method is used to clear all saved data. The return value of this method is undefined.

window.sessionStorage.clear() window.localStorage.clear()

Storage.key()

Storage.key() takes an integer as an argument (starting from zero) and returns the key value corresponding to that position.

window.sessionStorage.setItem(‘key’,’value’); Window. The sessionStorage. Key (0) / / “key” is combined with use of Storage. Length attribute and Storage. The key () method, which can iterate over all the keys. for(var i =0; i < window.localStorage.length; i++){ console.log(localStorage.key(i)); }

The last one

function onStorageChange(e) {
  console.log(e.key);
}
window.addEventListener('storage', onStorageChange);
Copy the code

OnStorageChange = onStorageChange = onStorageChange;