Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this "HTML5 web page storage method" article, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "HTML5 web page storage method" article.

I. get to know WebStorage

WebStorage is a technology that stores a small amount of data on a client (client) disk. Web designers can use JavaScript to manipulate browsers that support WebStorageAPI specifications. Let's take a look at WebStorage first.

The capacity of the WebStorage is determined by the client browser, usually 1MB~5MB.

WebStorage simply runs the client and does not send every web page request to the server.

WebStorage stores data as a set of key-value.

WebStorage provides two ways to store data on the client: one is localStorage, and the other is sessionStorage. The difference between the two lies in the declaration period and valid scope.

Table 1 differences in WebStorage types

WebStorage type lifecycle valid range

LocalStorage disappears only when it executes the delete command. Pages of the same site can be paged across windows.

When the sessionStorage browser window or tab is closed, it disappears only for the current browser window or page

Check whether the browser supports WebStorage. The syntax is as follows:

If (typeof (Storage) = = "undefined") {

Alert ("your browser does not support WebStorage")

}

Else {

/ / localStorage and sessionStorage program code

}

Note: IE and Firefox tests require files to be uploaded to the server or localhost to run. It is recommended that you use a GoogleChrome browser when testing.

Second, specific study

1. Visit localStorage

The same website means that the protocol, host (domain and ip), and transmission port (port) must all be the same.

WebStorage is only allowed to store string data. There are three ways to access localStorage. The previous window can not be written.

SetItem and getItem methods of the Storage object (key: "userdata", value: "HelloWorld")

Storage: window.localStorage.setItem (key,value)

Read: varv=window.localStorage.getItem (key)

Array index

Storage: windows. Local Storage [key] = value

Read: varv= window. LocalStorage [key]

Attribute

Storage: window.localStorage.key=value

Reading: varv=window.localStorage.key

Web page storage localStorage

FunctiononLoad () {

If (typeof (Storage) = = "undefined") {

Alert ("Sorry! your browser does not support WebStorage")

}

Else {

Btn_save.addEventListener ("click", saveToLocalStorage)

Btn_load.addEventListener ("click", loadFromLocalStorage)

}

}

FunctionsaveToLocalStorage () {

LocalStorage.username=inputname.value

}

FunctionloadFromLocalStorage () {

Show_ LocalStorage [XSS _ clean] = localStorage.username+ "Hello, welcome to my website!"

}

Please enter your name:

Save to localStorage

Read data from localStorage

2. Delete localStorage

To delete a piece of localStorage data, you can call the removeItem method or the delete property to delete it.

Window.localStorage.removeItem ("userdata")

Deletewindow.localStorage.userdata

Delete.window.localStorage ["userdata"]

To delete all localStorage data, you can use the clear () method.

LocalStorage.clear ()

Web page storage localStorage

FunctiononLoad () {

If (typeof (Storage) = = "undefined") {

Alert ("Sorry! your browser does not support WebStorage")

}

Else {

Btn_save.addEventListener ("click", saveToLocalStorage)

Btn_load.addEventListener ("click", loadFromLocalStorage)

Btn_clear.addEventListener ("click", clearLocalStorage)

}

}

FunctionsaveToLocalStorage () {

LocalStorage.username=inputname.value

}

FunctionloadFromLocalStorage () {

Show_ LocalStorage [XSS _ clean] = localStorage.username+ "Hello, welcome to my website!"

}

FunctionclearLocalStorage () {

LocalStorage.clear ()

Show_ local storage [XSS _ clean] = localStorage.username

}

Please enter your name:

Save to localStorage

Read data from localStorage

Clear localStorage data

20d778d6ea2e72c0debf96707138b93d_Center.jpg

3. Visit sessionStorage

Storage

Window.sessionStorage.setItem (key,value)

Window.sessionStorage [key] = [value]

Window.sessionStorage.key=value

Read

Varv=window.sessionStorage.getItem (key)

Varv=window.sessionStorage [key]

Varv=window.sessionStorage.key

Clear

Window.sessionStorage.removeItem (key)

Deletewindow.sessionStorage.key

Deletewindow.sessionStorage [key]

/ / clear all

SessionStorage.clear ()

Web page storage sessionStorage

FunctiononLoad () {

InputSpan.style.display='none'

If (typeof (Storage) = = "undefined") {

Alert ("Sorry! your browser does not support WebStorage")

}

Else {

/ * determine whether the name has been saved in localStorage, and execute the command in {} only when it has been saved * /

If (localStorage.username) {

/ * return undefined*/ if the data does not exist

If (! localStorage.counter) {

The initial value of localStorage.counter=1;/* is set to 1 percent /

}

Else {

LocalStorage.counter++;/* increment * /

}

Btn_login.style.display='none';/* hides the Login button * /

Show_ LocalStorage [XSS _ clean] = localStorage.username+ "Hello, this is your first" + localStorage.counter+ "visit to the website"

}

Btn_login.addEventListener ("click", login)

Btn_send.addEventListener ("click", sendok)

Btn_logout.addEventListener ("click", clearLocalStorage)

}

}

Functionsendok () {

LocalStorage.username=inputname.value

Location.reload (); / * reload the web page * /

}

Functionlogin () {

InputSpan.style.display=''

}

FunctionclearLocalStorage () {

LocalStorage.clear (); / * situation localStorage*/

Show_ LocalStorage [XSS _ clean] = "logged out successfully!"

Btn_login.style.display='';/* displays the login button * /

InputSpan.style.display='';/* displays the name input box and the submit button * /

}

Log in

Logoff

Please enter your name: submit

Note: the operator "+" in JavaScript can be added not only to numbers but also to strings. For example, "123" + 456 = "123456"

In the above example, "11111." occurs if localStorage.counter++; is changed to localStorage.counter=localStorage.counter+1;.

JavaScript converts a string to a number using the Number () method, localStorage.counter=Number (localStorage.counter) + 1

The above is the content of this article on "HTML5 web page storage methods". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.