Analysis of localStorage Local Storage and sessionStorage session Storage examples

This article mainly introduces the relevant knowledge of localStorage local storage and sessionStorage session storage instance analysis, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on localStorage local storage and sessionStorage session storage instance analysis. Let's take a look.

HTML5 allows large-scale data storage on the client side, and users can use web storage or web sql database. These two new features lay a persistent data operation foundation for the browser to become an application development platform.

The Web storage mechanism is a way to store and use data securely through key/value pairs in the form of strings, and its goal is to provide a more comprehensive way to create interactive Web applications.

1. Comparison between web storage and cookie:

1) first of all, the capacity is different, the storage capacity of web is larger, safer and easier to use, while the storage capacity of Cookie is limited.

2) the persistence of storage is different. Web storage is a way to permanently store Li-sized data through a browser.

II. Local storage and session storage

There are two types of data stored on the client:

1) localStorage: local storage, data storage with no time limit

2) sessionStorage: session storage, data storage for a session period

Let's write a simple example to persist data on the client side.

Js Code Collection Code

Var strDomain = "127.0.0.1"; / / define the current domain

Try {

/ * *

* because the earlier version of FireFox does not implement localStorage, it provides the globalStorage attribute to specify the domain to create a local storage area, which can also be specified as the current domain, so

* the following code can be used to achieve localStorage compatibility between browsers

* * /

Var oStorage = window.localStorage? Window.localStorage: window.globalStorage [strDomain]; / / h get the storage area

/ / check whether vistorCount exists

/ / if there is a read and add 1, add one visit statistics

/ / if it does not exist, it means the first visit, initializing it to 1

If (oStorage.visitorCount) {

OStorage.visitorCount = parseInt (oStorage.visitorCount,10) + 1

} else {

OStorage.visitorCount = 1

}

[xss_clean] ("Welcome first" + oStorage.visitorCount + "second visit"); / / write out access statistics

} catch (err) {

Alert (err.message? Err.message: err.toString ()

}

At the same time, we can clearly see the data stored on the client side by using developer tools (I use a Chrome browser).

Store data during a session

SessionStorage stores data for a Session, and when the user closes the browser window, the data is deleted.

The following code is used to create a submission form:

Html Code Collection Code