JavaScript Intensive Tutorials--sessionstorage and Localstorage

This article is the official HTML5 training course for h5edu institutions, mainly introduced: JavaScript intensive tutorials--sessionstorage and Localstorage

The Web Storage in HTML5 includes two ways of storage: Sessionstorage and Localstorage. Sessionstorage is used to store data locally in a session, which can only be accessed by a page in the same session and destroyed when the session ends. So sessionstorage is not a persistent local store, only session-level storage. While Localstorage is used for persistent local storage, the data will never expire unless the data is actively deleted. The difference between Web storage and cookies is that the concept of Web storage is similar to a cookie, except that it is designed for larger capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent past, which virtually wastes bandwidth, and the cookie needs to specify the scope and cannot be called across domains. In addition, WEB storage has methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves. However, cookies are also not available or missing: The role of cookies is to interact with the server as part of the HTTP specification, whereas Web Storage is only for local "storage" of data (corrections from @otakustay) HTML5 web Storage browser Support In addition to IE7 and the following are not supported, other standard browsers are fully supported (IE and FF need to run in the Web server), it is worth mentioning that IE always do good things, such as IE7, The UserData in IE6 is actually a solution for JavaScript local storage. With simple code encapsulation you can unify to all browsers that support Web storage. To determine whether the browser supports Localstorage, you can use the following code: if (window.localstorage) {alert ("Browse support Localstorage")}else{alert (" Browse temporarily does not support Localstorage ")}//or if (typeof window.localstorage = = ' undefined ') {alert (" Browse temporarily does not support Localstorage ")} Localstorage and Sessionstorage operations Localstorage and Sessionstorage have the same methods of operation, such as SetiteMethods of Localstorage and sessionstorage such as M, GetItem and RemoveItem SetItem store value use: Store value in key field usage:. SetItem (key, value) code example: Sessionstorage.setitem ("Key", "value"); Localstorage.setitem ("Site", "js8.in"); GetItem Gets the value purpose: Gets the values used by the specified key local store:. GetItem (key) code example: var value = Sessionstorage.getitem ("key"); var site = localstorage.getitem ("site"); RemoveItem Delete key purpose: Delete the value of the specified key local store usage:. RemoveItem (Key) code example: Sessionstorage.removeitem ("key"); Localstorage.removeitem ("site"); clear clears all key/value uses: Clears all key/value usages:. Clear () code example: Sessionstorage.clear (); Localstorage.clear (); Other methods of operation: Point operation and []web storage can not only use their own setitem,getitem and other convenient access, but also can be like ordinary objects with the point (.) Operators, and [] the way the data is stored, like the following code: var storage = window.localstorage; Storage.key1 = "Hello"; storage["Key2"] = "world"; Console.log (Storage.key1); Console.log (storage["Key2"]); Localstorage and Sessionstorage key and length properties are implemented to traverse Sessionstorage and Localstorage supplied key () and length can easily implement stored data traversal, such as the following code: var storage = window.localstorage; For (var i=0, len = storage.length; i < Len; i++) {var key = Storage.keY (i);     var value = Storage.getitem (key); Console.log (key + "=" + value); }

Click to enter JavaScript Intensive tutorial: http://www.h5edu.cn/htm/step/h5edu_44.html

JavaScript Intensive Tutorials--sessionstorage and Localstorage