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

Today, I would like to share with you the relevant knowledge of HTML5 local storage method. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

HTML5 LocalStorage local storage

When it comes to local storage, this thing has gone through a lot of hard work to get to HTML5.

Of course, the original Cookies is that we all know that the main problem is that it is too small, probably just like 4KB, and IE6 only supports 20 cookies for each domain name, which is too little. The advantage is that everyone supports it, and the support is quite good. A long time ago, the users who replaced cookies gradually disappeared, as if the users who replaced javascript did not exist.

UserData is IE's stuff, rubbish. Now the most commonly used is Flash, the space is 25 times that of Cookie, which is basically enough. After that, Google launched Gears, although there are no restrictions, but the annoying thing is to install additional plug-ins (no specific study). When it comes to HTML5 to unify all these, the official suggestion is that each website 5MB, very large, just save some strings, enough. What is strange is that all supported browsers currently use 5MB. Although there are some browsers that can be set up by users, it is more appropriate for web makers to consider the current scale in terms of 5MB.

IE supported it at 8.0, which was very unexpected. However, it should be noted that IE, Firefox testing needs to upload the file to the server (or localhost), directly click on the local HTML file, it is not possible.

The first step is to naturally check whether the browser supports local storage. In HTML5, local storage is a property of a window, including localStorage and sessionStorage, which should be easily recognizable by name. The former is always local, but with session, the window is gone once closed. Many of the appropriate ones are exactly the same, so take localStorage as an example.

If (window.localStorage) {

Alert ('this browser supports localStorage')

} else {

Alert ('this browser does not support localStorage')

}

The way to store data is to add an attribute directly to window.localStorage, such as window.localStorage.an or window.localStorage ["a"]. Its operation methods of reading, writing and deleting are very simple, and exist in the form of key-value pairs, as follows:

LocalStorage.a = 3; / / set a to "3"

LocalStorage ["a"] = "sfsf"; / / set a to "sfsf", overwriting the above values

LocalStorage.setItem ("b", "isaac"); / / set b to "isaac"

Var A1 = localStorage ["a"]; / / get the value of a

Var a2 = localStorage.a; / / get the value of a

Var b = localStorage.getItem ("b"); / / get the value of b

LocalStorage.removeItem ("c"); / / clear the value of c

Naturally, the most recommended ones here are getItem () and setItem (), and clear key-value pairs using removeItem (). If you want to clear all key-value pairs at once, you can use clear (). In addition, HTML5 provides a key () method that can be used when you don't know there are some key values, as follows:

Var storage = window.localStorage

Function showStorage () {

For (var I = 0; I / / key (I)) obtains the corresponding key, and then uses the getItem () method to obtain the corresponding value.

[xss_clean] (storage.key (I) + ": + storage.getItem (storage.key (I)) +"

")

}

}

Write the simplest counter that makes use of local storage:

Var storage = window.localStorage

If (! Storage.getItem ("pageLoadCount")) storage.setItem ("pageLoadCount", 0)

Storage.pageLoadCount = parseInt (storage.getItem ("pageLoadCount")) + 1; / / format conversion is required

Document.getElementByIdx_x ("count"). InnerHTML = storage.pageLoadCount

ShowStorage ()

If you keep refreshing, you can see the number growing a little bit.

It should be noted that HTML5 local storage can only store binary, any format will be automatically converted to serial, so when reading, you need to do your own type conversion. This is why parseInt must be used in the previous code.

In addition, there is sometimes a weird QUOTA_EXCEEDED_ERR error when setting setItem () on iPhone / iPad. In this case, the removeItem () is usually determined before setItem.

The local storage of HTML5 also provides a storage event that can listen for changes in key-value pairs, using the following methods:

If (window.addEventListener) {

Window.addEventListener ("storage", handle_storage,false)

} other if (window.attachEvent) {

Window.attachEvent ("onstorage", handle_storage)

}

Function handle_storage (e) {

If (! E) {e = window.event;}

/ / showStorage ()

}

For the event variable e, it is a StorageEvent object that provides some practical properties to observe the changes of key-value pairs, as shown in the following table:

Property

Types

Description

Keys

String

Add, delete, or modify named keys

Old value

Any

Previous value (now overridden); null if a new item is added

NewValue

Any

New value, or null if a project is added

Web site / uri

String

The page that calls the method that triggered this change

Here add two key-value pairs an and b, and add a button. Set a fixed value for a, and when you click the button, modify the value of b:

You have viewed this page 0 times.

Tests have found that browsers currently do not support this very well, only iPad and Firefox support, and Firefox support is so messy that e-objects do not have those properties at all. IPad support is very good, using e.uri (not e.url), Safari on desktops is not good, weird.

At present, browsers all have good debugging capabilities for developers. Here are the debugging tools for Chrome and Firefox to view LocalStorage:

In addition, the current JavaScript uses a lot of json format, and if you want to store it locally, you can directly call JSON.stringify () to encode it. After reading it, call JSON.parse () to convert the string to json format, as follows:

Var details = {author: "isaac", "description": "fresheggs", "rating": 100}

Storage.setItem ("details", JSON.stringify (details))

Details = JSON.parse (storage.getItem ("details"))

JSON objects are basically supported on browsers that support localStorage. Note that IE8 supports JSON, but if you add the following compatibility mode code, you can't cut to IE7 mode (localStorage is still supported at this time, although the display window .localStorage is [object] rather than the previous [object Storage], but the test found that getItem (), setItem (), etc.) can be used.

These are all the contents of the article "HTML5 Local Storage methods". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more 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.