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

This article mainly introduces "the method of HTML5 storage". In the daily operation, I believe that many people have doubts about the method of HTML5 storage. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "HTML5 storage method". Next, please follow the editor to study!

Use HTML5 to store users' browsing data locally.

Earlier, local storage used cookies. But Web storage needs to be more secure and fast. This data will not be saved on the server, but it will only be used on the data of the website requested by the user. It can also store a large amount of data without affecting the performance of the site.

The data exists as a key / value pair, and the data of the web page is only allowed to be accessed by that page. Build a new front-end learning qun438905713, most of them are zero-based learners in the group, we help each other, answer each other, and prepare a lot of learning materials. Welcome zero-basic partners to communicate with each other.

Internet Explorer 8, Firefox, Opera, Chrome, and Safari support Web storage.

Note: web storage is not supported in Internet Explorer 7 and earlier IE versions.

The two objects on which the client stores data are:

LocalStorage-data store with no time limit sessionStorage-data store for one session

Before using web storage, check whether the browser supports localStorage and sessionStorage:

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

{

/ / Yes! Support for localStorage sessionStorage objects!

/ / some code.

}

Else

{

/ / Sorry! Web storage is not supported.

}

There is no time limit for the data stored by the localStorage object. After the next day, the second week, or the next year, the data is still available.

LocalStorage.sitename= "W3Cschool online tutorial";?

Document.getElementById ("result"). InnerHTML= "website name:"? +? localStorage.sitename

Give it a try?

Instance resolution:

Create a localStorage key / value pair using key= "sitename" and value= "W3Cschool online tutorials". Retrieve the value with the key value "sitename" and insert the data into the element of id= "result".

The above example can also be written as follows:

Remove "lastname" from localStorage:

The same API can be used for both localStorage and sessionStorage. The following are commonly used (take localStorage as an example):

Save data: localStorage.setItem (key,value); read data: localStorage.getItem (key); delete single data: localStorage.removeItem (key); delete all data: localStorage.clear (); get the key:localStorage.key of an index (index)

Tip:? Key / value pairs are usually stored as strings, and you can convert the format as needed.

The following example shows the number of times a user clicks a button.

The string values in the code are converted to numeric types: build a new front-end learning qun438905713, most of them are zero-based learners in the group, we help each other, answer each other, and prepare a lot of learning materials. Welcome zero-based partners to communicate with each other.

If (localStorage.clickcount)

{

LocalStorage.clickcount=Number (localStorage.clickcount) + 1

}

Else?

{

LocalStorage.clickcount=1

}

Document.getElementById ("result"). InnerHTML= "? have you clicked the button?" ? + localStorage.clickcount?+? "times"

Give it a try

The sessionStorage method stores data for a session. When the user closes the browser window, the data is deleted.

How to create and access a sessionStorage::

If (sessionStorage.clickcount)

{

SessionStorage.clickcount=Number (sessionStorage.clickcount) + 1

}

Else

{

SessionStorage.clickcount=1

}

Document.getElementById ("result"). InnerHTML= "have you clicked this button in this session?" ? + sessionStorage.clickcount?+? "times?"

At this point, the study of "the method of HTML5 storage" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.