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

This article focuses on "how to use HTML5 local storage technology". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use HTML5 local storage technology.

Local caching is a new technology of HTML5, which makes the development of mobile web possible. We all know that speed is the key to building a high-performance mobile application. Before HTML5, only cookie could store data, and the size was only 4kb. This severely limits the storage of application files, resulting in longer loading time for mobile applications developed by web. With local storage, web mobile applications can be closer to the native.

In the browser, local storage is called through window.localStorage. The code to determine whether the browser supports local storage is as follows:

XML/HTML Code copies content to the clipboard

If (window.localStorage) {

Alert ('This browser supports localStorage')

} else {

Alert ('This browser does NOT supportlocalStorage')

}

If we want to store the data locally, the easiest way is to window. LocalStorage adds an attribute and assigns a value to it. For example, if we want to store a data name whose value is Tom, we can do this in the following ways:

XML/HTML Code copies content to the clipboard

Window.localStorage.name = "Tom"

Note here that string variables require quotation marks. When we want to retrieve the data market from the local storage, we can use the getItem method. The whole code flow is as follows:

JavaScript Code copies content to the clipboard

Var storage = window.localStorage

Storage.name = "Tom"

/ / retrieve name data

Var name1 = storage.getItem ("name")

Alert (name1)

The result of this code displayed in the Chrome browser console is a prompt box showing Tom. It can be seen that we have correctly stored and read the data in this way.

If we want to delete these stored data, we can use the removeItem method. Add the following code to the above code:

JavaScript Code copies content to the clipboard

Storage.removeItem ("name")

At this point, the null will be displayed when we alert again, because the data has been emptied.

After understanding some basic local storage usage and ideas, let's systematically introduce local storage.

Local storage is divided into three main categories: localStorage/sessionStorage/ local database

The usage, functions and calling methods of localStorage and sessionStorage are all the same, but they just have different meanings. Among them, the data stored in localStorage is valid for a long time, while the information stored in sessionStorage is destroyed when each session (session) is closed (in popular terms, the data is automatically destroyed when the page is closed).

Because the characteristics of the two are different, the application scenarios are also very different. Usually, when we need to store some user configuration items and other data information that need to be stored for a long time, we need to use localStorgae to save, taking advantage of its long time-consuming characteristics. Accordingly, we need to use sessionStorage when we need to implement session-based functions such as shopping carts.

Because the usage of localStorage and sessionStorage are the same, we take localStorage as an example to introduce their methods.

1. Set data setItem

The usage is localStorage.setItem ("key", "value"), which means that the value value is passed to key. (the same is true for the use of sessionStorage.setItem, which will not be described one by one below)

2. Obtain data getItem

The usage is localStorage.getItem ("key"). As long as you enter the corresponding key value, you can extract the corresponding value value from it.

3. Delete specific data removeItem

The usage is localStorage.removeItem (key), and delete the data corresponding to key.

4. Clear all data clear

The usage is localStorage.clear (), which means to empty data from all storage systems.

At this point, I believe you have a deeper understanding of "how to use HTML5 local storage technology". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.