JavaScript Intensive Tutorials--sessionstorage and Localstorage

This article ish5eduAgency officialHTML5 Trainingtutorials, the main introduction:JavaScript Intensive Tutorials--sessionstorage and Localstorage
 

The Web storage in HTML5 includes two storage methods: 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 setitem,getitem,removeitem,clear methods, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie. However, cookies are also not available or missing: The role of cookies is to interact with the server as part of the HTTP specification, and Web storage is only for local "storage" of data (from @otakustay  &nbsp 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")  } Both the Localstorage and Sessionstorage operations Localstorage and Sessionstorage have the same methods of operation, such as SetItem, Localstorage and Sessionstorage methods such as GetItem and RemoveItem SetItem store value use: Store value in the key field usage:. SetItem ( key,  Value) code example: Sessionstorage.setitem ("Key",  "value"),  localstorage.setitem ("Site",  "js8.in"); GetItem Gets the value use: 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 used for local storage of the specified key:. RemoveItem (Key code example: Sessionstorage.removeitem ("key"),  localstorage.removeitem ("site"), clear clears all Key/value uses: Clears all key/ Value usage:. Clear () code example: Sessionstorage.clear ();  localstorage.clear (); Other methods of operation: Point operations and []web  Storage can not only use their own setitem,getitem and other convenient access, but also like ordinary objects with the point (.) operator, 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"]); The key and length properties of the Localstorage and Sessionstorage traverse the key () and the length provided by the sessionstorage and localstorage to facilitate the implementation of the stored data traversal, For example, 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

JavaScript Intensive Tutorials--sessionstorage and Localstorage