HTML5 Web Storage (Web Storage) technology and usage

Using HTML5, you can store the user's browsing data locally. Earlier, local storage used cookies. But Web storage needs to be more secure and fast, and this data will not be saved on the server, but only for users requesting site data. It can also store large amounts of data without affecting the performance of the site. Data exists as a key/value pair, and the data for the Web page is only allowed for use by the Web page access.

The purpose of WEB storage is to overcome some of the limitations imposed by cookies, and when data needs to be tightly controlled on the client side, there is no need to consistently send data back to the server. The two main goals of WEB storage are:

The

provides a way to store session data outside of a cookie. Provides a mechanism for storing a large number of data that can exist across sessions. The
     web storage is divided into two categories:  sessionstorage and Localstorage, which is an instance of storage. It can be clearly seen from the literal meaning that Sessionstorage saves the data in session and the browser shuts down, while Localstorage keeps the data in the client's local;  either Sessionstorage, Or localstorage, you can use the same APIs, commonly used in the following (take Localstorage as an example):  
Save data: Localstorage.setitem (key,value);  Read data: Localstorage.getitem (key);  Delete individual data: Localstorage.removeitem (key);  Delete all data: Localstorage.clear ();   Get an index of Key:localStorage.key (index);        as above, key and value must all be strings, in other words, the Web Storage API can only manipulate strings.  
1, the Sessionstorage object       sessionstorage object stores data specific to a conversation. That is, its lifecycle is the current window or tab, and once the window or tab is permanently closed, all data stored through the sessionstorage is emptied. Data stored in Sessionstorage can exist across page refreshes, and can still be available if browser support crashes and restarts (note: Firefox and Weblit are supported, ie not).       Because the Sessionstorage object is bound to a server session, it is not available when the file is running locally. The data stored in the Sessionstorage can only be accessed by the page that originally stores the data to the object, so there are restrictions on multiple page applications. Next, write a simple example to illustrate how to use. The code is as follows:

<! DOCTYPE html> <! DOCTYPE html> Effect:

In addition to using the traversal method in a case, you can use the for-in loop to iterate over the values in Sessionstorage:
for (var key in sessionstorage) {
     var value = Sessionstorage.getitem (key);
     Console.log (key + "=" + value);
}
 
2,
Localstorage ObjectsLocalstorage always keeps the data locally on the client. The use of Localstorage and sessionstorage is similar, there is no detailed explanation here.