Introduction to HTML5 local storage features-

Local Storage is not a new feature. Before HTML5, we can save local data in various ways, including the following methods: the size of HTTPCookie is limited to 4 kbie. The size of userData is limited to 64 kbflash and limited to kbgooglegears ...,. Local Storage is not a new feature. Before HTML5, we can save local data in various ways, including the following methods:

• The HTTP Cookie size is limited to 4 kb.

• The size of userData is limited to 64 KB.

• Flash size limit: KB

• No size limit for Google Gears

• HTML5 local storage size limit: 5 MB
  

As we all know, Cookies are stored in a small size, which is about 4 kb, and IE6 limits 20 cookies per domain name. However, the advantage of Cookie is its versatility. Almost no user can disable the Cookie function of the browser.

UserData is a dedicated feature of IE. It is precisely because it is dedicated that no one uses it. It is estimated that there are not many people who know it. Currently, the most used is the local Flash storage. The space is 25 times that of the Cookie, and the size is basically enough.

Later, Google released Google Gears. Although there is no limit on the storage size, but additional plug-ins need to be installed, this feature will be shot down, unless Goggle can ensure that the installation rate of Google Gears is above 90%.

The emergence of HTML5 finally solved this problem. The first is the size limit. W3C suggests that each website has 5 MB, which is large enough to store some string data. Secondly, it is universal. HTML5 is a browser standard. It will be a matter of time for everyone to unify the standard. Although the size of HTML5 local storage is limited to 5 MB, Some browsers can obtain user consent to increase the storage space when the local space exceeds 50 MB, such as Safari. For HTML5 developers, 5 MB space is enough.

For example, the support for HTML5 local storage is unexpectedly supported by IE at 8.0, which was discovered only when I checked the relevant materials. It should be noted that when using IE and Firefox for local testing, you need to upload the file to the server (or you can also set up the server locally) and open the local HTML file directly, you cannot use local storage.
If you want to use HTML5 for local storage, you must first check whether the browser supports local storage to take care of older browsers. In HTML5, local storage includes localStorage and sessionStorage. The former always exists locally, and the latter is temporarily stored when the web page is opened. Once the window is closed, the storage information is cleared. The usage is basically the same. Here we use localStorage as an example.

1: if(window.localStorage){2: alert('This browser supports localStorage');3: }else{4: alert('This browser does NOT support localStorage');5: } 

1. You can directly add an attribute to window. localStorage, such as window. localStorage. a or window. localStorage ["a"]. The method for reading, writing, and deleting data is simple. It exists as a key-value pair, as shown below:

1: localStorage. a = 3; // set a to "3" 2: localStorage ["a"] = "sfsf"; // set a to "sfsf", overwrite the above value 3: localStorage. setItem ("B", "isaac"); // Set B to "isaac" 4: var a1 = localStorage ["a"]; // obtain the value of a 5: var a2 = localStorage. a; // obtain the value of a 6: var B = localStorage. getItem ("B"); // obtain the value of B 7: localStorage. removeItem ("c ");

// Clear the value of c
It is recommended that getItem () and setItem () be used to obtain the set key value, and removeItem () be used to clear the key value pair (). Use clear () to clear all key-value pairs.
HTML5 local storage can only store string data. It is automatically converted to a string when stored in any format. Therefore, you need to convert the data type when reading the data.
The local storage of HTML5 provides a storage event that can listen for changes to key-value pairs. The usage is as follows:

1: if(window.addEventListener){2: window.addEventListener("storage",handle_storage,false);3: }else if(window.attachEvent){4: window.attachEvent("onstorage",handle_storage);5: }6: function handle_storage(e){7: if(!e){e=window.event;}8: //showStorage();9: } 

Event variable e is a StorageEvent object. It provides some practical attributes to observe the changes of key-value pairs.
§ Key String listens for the changed key name

§ OldValue arbitrarily changes the previous value

§ Value after any change of newValue

§ Url String listens to the page address where the key value changes

Currently, javascript uses the most json data format. To store Json data locally using HTML5, directly call JSON. stringify () to convert json data into strings. Call JSON. parse () to convert the string to json format. The Code is as follows:

var details = {author:"isaac","description":"fresheggs","rating":100};storage.setItem("details",JSON.stringify(details));details = JSON.parse(storage.getItem("details")); 

The above is the content of the HTML5 local storage features. For more information, please refer to the PHP Chinese Network (www.php1.cn )!