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

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

Therefore, sessionStorage is not a persistent local storage, only session-level storage. On the other hand, localStorage's local storage for persistence will never expire unless the data is actively deleted.

First, the difference between network storage and biscuits the concept of Web storage and Cookie similarity, the difference is that it is designed to achieve larger capacity storage. The size of Cookie overlaps, and Cookie is sent every time you request a new page, which is virtually a waste of bandwidth. In addition, cookies need to specify a scope and cannot be called across domains. In addition, network storage has setItem, getItem, removeItem, clarity and other methods, unlike cookies that require front-end developers to encapsulate setCookie methods and getCookie methods. But cookies are also impossible or missing: the role of Cookie is to interact with the server as part of the HTTP specification, while Web storage may be created locally to "store" data (parsed from @ otakustay)

Second, the browser support of html5 web storage. Browsers fully support all standard browsers except IE7 and below (ie and FF need to be run in web servers). It is worth mentioning that IE always does good things. For example, UserData in IE7,IE6 is actually a solution for JavaScript local storage. It can be unified to all browsers to support Web storage through simple code encapsulation. To determine whether the browser supports localStorage, you can use the following code:

Copy the code

The code is as follows:

If (window.localStorage) {alert ("browsing supports localStorage")} else {alert ("browsing does not support localStorage")} / / or if (typeof window.localStorage = = 'undefined') {alert ("browsing temporary storage) does not support localStorage")}

Third, localStorage and sessionStorage operation

Both localStorage and sessionStorage have the same operation methods, such as localStorage and sessionStorage methods such as setItem,getItem and removeItem: setItem stores values purpose: store values within the range of keys: .setItem (key,value) code example:

Copy the code

The code is as follows:

SessionStorage.setItem ("key", "value"); localStorage.setItem ("site", "js8.in")

GetItem get value purpose: get the value stored locally for the specified key: .getItem (key) code example:

Copy the code

The code is as follows:

Var value = sessionStorage.getItem ("key"); var site = localStorage.getItem ("site")

RemoveItem Delete key usage: delete the value stored locally by the specified key: .removeItem (key) code example:

Copy the code

The code is as follows:

SessionStorage.removeItem ("key"); localStorage.removeItem ("site")

Clear clears all keys / values purpose: clear all keys / values usage:. Clear () code example:

Copy the code

The code is as follows:

SessionStorage.clear (); localStorage.clear ()

Fourth, other operation methods: point operation and []

Web Storage can not only be easily accessed with its own setItem,getItem, but also can be accessed using dot (like ordinary objects. Operator, and [] for data storage, such as the following code:

Copy the code

The code is as follows:

Var storage = window.localStorage; storage.key1 = "hello"; storage ["key2"] = "World"; console.log (storage.key1); console.log (storage ["key2"])

Fifth, the key and length attributes of localStorage and sessionStorage are traversed.

The key () and length provided by sessionStorage and localStorage make it easy to traverse stored data, such as the following code:

Copy the code

The code is as follows:

Var storage = window.localStorage; for (var I = 0pl Len = storage.length; I

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.