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

This article mainly introduces the example analysis of HTML5Web storage, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article.

What is HTML5 Web storage?

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 website data 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.

Browser support

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

Note: Internet Explorer 7 and earlier IE versions do not support web storage.

LocalStorage and sessionStorage

There are two new objects for storing data on the client:

LocalStorage-data storage with no time limit

SessionStorage-data store for a session

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

If (typeof (Storage)! = = "undefined") {/ / Yes! LocalStorage and sessionStorage support! / / Some code. } else {/ / Sorry! No web storage support.. }

LocalStorage object

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.

Example

LocalStorage.lastname= "Smith"; document.getElementById ("result") [xss_clean] = "Last name:" + localStorage.lastname

Instance resolution:

Create a localStorage key / value pair using key= "lastname" and value= "Smith"

Retrieve the value with the key "lastname" and insert the data into the element of id= "result"

Tip: key / value pairs are usually stored as strings, and you can convert this 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:

If (localStorage.clickcount) {localStorage.clickcount=Number (localStorage.clickcount) + 1;} else {localStorage.clickcount=1;} document.getElementById ("result") [xss_clean] = "You have clicked the button" + localStorage.clickcount + "time (s)."

SessionStorage object

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") [xss_clean] = "You have clicked the button" + sessionStorage.clickcount + "time (s) in this session." Thank you for reading this article carefully. I hope the article "sample Analysis of HTML5Web Storage" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.