HTML5 's local storage \sessjion storage

Reprinted: HTMl5 of 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

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 situation

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, such as IE7, IE6 UserData is actually JavaScript local storage Solution. 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

Both Localstorage and Sessionstorage have the same methods of operation, such as SetItem, GetItem, and RemoveItem.

Localstorage and Sessionstorage Methods SetItem store Value

Purpose: Store value in the key field
Usage:. SetItem (key, value)
code example:

Sessionstorage.setitem ("Key", "value"); Localstorage.setitem ("Site", "js8.in");

GetItem Get Value

Purpose: Gets the value that the specified key is stored locally
Usage:. GetItem (Key)
code example:

var value = Sessionstorage.getitem ("key"); var site = localstorage.getitem ("site");

RemoveItem Delete key

Purpose: Deletes the value stored locally by the specified key
Usage:. RemoveItem (Key)
code example:

Sessionstorage.removeitem ("key"); Localstorage.removeitem ("site");

Clear clears all the Key/value

Purpose: Clear all the Key/value
Usage:. Clear ()
code example:

Sessionstorage.clear (); Localstorage.clear ();

Other ways to do this: point operations 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"]);

The key and length properties of Localstorage and Sessionstorage traverse

Sessionstorage and Localstorage provide key () and length to facilitate the implementation of 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); }

Storage Events

Storage also provides the storage event , which can trigger the storage event when the key value is changed or clear, as the following code adds a listener that changes the storage event:

if (Window.addeventlistener) {Window.addeventlistener ("storage", Handle_storage,false);} else if (window.attachevent) {window.attachevent ("Onstorage", Handle_storage),} function Handle_storage (e) {if (!e) {e= window.event;} }

The specific properties of the storage event object are the following table:

Property	Type	Description
Key	String	The named key is added, removed, or moddified
OldValue	Any	The previous value (now overwritten), or null if a new item is added
NewValue	Any	The new value, or null if an item is added
Url/uri	String	The page that called the method, the triggered this change

Web Storage Demo

HTML5 demos:storage Web Storage Example

HTML5 's local storage \sessjion storage