1. Overview

localStorage and sessionStorage are collectively called Web Storage, which allows web pages to store data on the browser side.

The data saved by sessionStorage is used for a browser session. When the session ends (usually 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 web page can Read previously saved data directly. Except for the different storage periods, theproperties and methodsof these twoobjectsare exactly the same.

They are very much like an enhanced version of thecookiemechanism and can use much larger storage space. Currently, the storage limit per domain depends on the browser, and is 2.5MB for Chrome, 5MB for Firefox and Opera, and 10MB for IE. Among them, Firefox's storage space is determined by the first-level domain name, while other browsers do not have this limitation. That is, in Firefox, a.example.com and b.example share 5MB of storage space. In addition, like cookies, they are also subject to same domain restrictions. The data stored in a web page can only be read by web pages in the same domain.

By checking whether thewindow objectcontains the sessionStorage and localStorage properties, you can determine whether the browser supports these two objects.

function checkStorageSupport() { var result = {}; //sessionStorage if (window.sessionStorage) { result.sessionStorage = true; } else { result.sessionStorage = false; } //localStorage if (window.localStorage) { result.localStorage = true; } else { result.localStorage = false; } return result; }

Copy after login

2. Operation method

2.1 Saving/reading data

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

Use the setItem method to store data. It accepts two parameters, the first is the key name and the second is the saved data.

sessionStorage.setItem('key', 'value'); localStorage.setTime('key', 'value');

Copy after login

Read data using the getItem method. It has only one parameter, which is the key name.

var valueSession = sessionStorage.getItem('key');var valueLocal = localStorage.getItem('key');

Copy after login

2.2 Clear data

The removeItem method is used to clear the data corresponding to a certain key name.

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

Copy after login

clearmethod is used to clear all saved data.

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

Copy after login

2.3 Traversal operation

Using the length attribute and key method, all keys can be traversed.

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

Copy after login

The key method obtains the key value based on the position (starting from 0).

localStorage.key(1);

Copy after login

3. storageEvent

When the stored data changes, the storage event will be triggered. We can specify thecallback functionfor this event.

window.addEventListener('storage', onStorageChange);

Copy after login

The callback function accepts an event object as a parameter. The key attribute of this event object saves the changed key name.

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

Copy after login

In addition to the key attribute, the event object has three attributes:

oldValue: the value before update. If the key is newly added, this attribute is null.

newValue: updated value. If the key was deleted, this property is null.

url: The URL of the web page that originally triggered the storage event.

It is worth noting that this event is not triggered on the current page that causes the data to change. If the browser opens multiple pages under a domain name at the same time, when one of the pages changes the data of sessionStorage or localStorage, the storage events of all other pages will be triggered, and the storage event will not be triggered by the original page. Communication between multiple windows can be achieved through this mechanism. Among all browsers, except IE, it will trigger the storage event on all pages.

The above is the detailed content of Specific analysis of localStorage and sessionStorage of HTML5 local storage. For more information, please follow other related articles on the PHP Chinese website!