Storage interface

Overview

The Storage interface is used for scripts to save data in the browser. Two objects deploy this interface: window.sessionStorage and window.localStorage.

The data saved by sessionStorage is used for a session of the browser. When the session ends (usually when the window is closed), the data is cleared; the data saved by localStorage exists for a long time. The next time you visit the website, the webpage can be Read the previously saved data directly. In addition to the difference in the length of the shelf life, other aspects of the two objects are consistent.

The saved data exists in the form of "key-value pairs". In other words, each item of data has a key name and corresponding value. All data are saved in text format.

This interface is very similar to the enhanced version of Cookie, which can use much larger storage space. Currently, the storage limit of each domain name depends on the browser, Chrome is 2.5MB, Firefox and Opera are 5MB, and IE is 10MB. Among them, the storage space of Firefox is determined by the first-level domain name, while other browsers do not have this restriction. In other words, in Firefox, a.example.com and b.example.com share 5MB of storage space. In addition, like cookies, they are also restricted by the same domain. The data stored in a webpage can only be read by webpages under the same domain, and an error will be reported if cross-domain operations are performed.

Properties and methods

The Storage interface has only one attribute.

-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

This interface provides 5 methods.

Storage.setItem()

The Storage.setItem() method is used to store data. It accepts two parameters, the first is the key name, and the second is the saved data. If the key name already exists, this method will update the existing key value. This method has no return value.

window.sessionStorage.setItem("key", "value");
window.localStorage.setItem("key", "value");

Note that both parameters of Storage.setItem() are strings. If it is not a string, it will be automatically converted into a string and then stored in the browser.

window.sessionStorage.setItem(3, { foo: 1 });
window.sessionStorage.getItem("3"); // "[object Object]"

In the above code, the two parameters of the setItem method are not strings, but the stored values ​​are all strings.

If the storage space is full, the method will throw an error.

This method is not necessary for writing, and direct assignment is also possible.

// The following three writing methods are equivalent
window.localStorage.foo = "123";
window.localStorage["foo"] = "123";
window.localStorage.setItem("foo", "123");

Storage.getItem()

The Storage.getItem() method is used to read data. It has only one parameter, which is the key name. If the key name does not exist, the method returns null.

window.sessionStorage.getItem("key");
window.localStorage.getItem("key");

The key name should be a string, otherwise it will be automatically converted to a string.

Storage.removeItem()

The Storage.removeItem() method is used to remove the key value corresponding to a certain key name. It accepts the key name as a parameter. If the key name does not exist, the method will not do anything.

sessionStorage.removeItem("key");
localStorage.removeItem("key");

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()

The Storage.key() method accepts an integer as a parameter (starting from zero) and returns the key name corresponding to the position.

window.sessionStorage.setItem("key", "value");
window.sessionStorage.key(0); // "key"

Using the Storage.length property in combination with the Storage.key() method, all keys can be traversed.

for (var i = 0; i < window.localStorage.length; i++) {
  console.log(localStorage.key(i));
}

storage events

When the data stored in the Storage interface changes, the storage event will be triggered, and the listener function for this event can be specified.

window.addEventListener("storage", onStorageChange);

The listener function accepts an event instance object as a parameter. This instance object inherits the StorageEvent interface and has several unique properties, all of which are read-only.

-StorageEvent.key: A string indicating the name of the key that has changed. If the storage event is caused by the clear() method, this property returns null. -StorageEvent.newValue: A string representing the new key value. If the storage event is triggered by the clear() method or deleting the key-value pair, this property returns null. -StorageEvent.oldValue: A string representing the old key value. If the key-value pair is new, this attribute returns null. -StorageEvent.storageArea: object, returns the entire object where the key-value pair is located. In other words, you can get all the key-value pairs stored in the current domain name from this attribute. -StorageEvent.url: A string representing the URL of the web page that originally triggered the storage event.

The following is an example of the StorageEvent.key property.

function onStorageChange(e) {
  console.log(e.key);
}

window.addEventListener("storage", onStorageChange);

Note that this event has a very special place, that is, it is not triggered on the current page that caused the data change, but on other windows of the same domain name. In other words, if the browser only opens one window, this event may not be observed. For example, when multiple windows are opened at the same time, when one of the windows causes the stored data to change, the execution of the monitoring function can only be observed in the other windows. Through this mechanism, communication between multiple windows can be realized.