HTML5 storage mode Sessionstorage and Localstorage detailed

So sessionstorage is not a persistent local store, it's just session-level storage. The localstorage is used for persistent local storage, and 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 cookies, except that it is designed for greater capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent to the past, which wastes bandwidth, and the cookie needs to specify the scope and not be called across domains.

In addition, WEB storage have methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves.

But cookies are also unavailable or missing: Cookies are used to interact with the server and exist as part of the HTTP specification, and Web Storage are only generated to "store" data locally (from @otakustay corrections)

Second, the HTML5 Web Storage browser support situation

Browser support in addition to IE7 and the following does not support, other standard browsers are fully supported (IE and FF to run on the Web server), it is worth mentioning that IE always do good things, such as IE7, IE6 UserData In fact is the JavaScript local storage solution. With simple code encapsulation, it is possible to unify all browsers to support Web Storage.

To determine whether the browser supports Localstorage, you can use the following code:

Copy Code

The code is as follows:

if (window.localstorage) {

Alert ("Browse support Localstorage")

}

Else

{

Alert ("Browsing temporarily does not support Localstorage")

}

Or if (typeof window.localstorage = = ' undefined ') {alert ("Browse temporarily does not support Localstorage")}

Iii. Localstorage and Sessionstorage operations

Localstorage and sessionstorage all have the same operating methods, such as SetItem, GetItem and RemoveItem, etc.

Methods of Localstorage and Sessionstorage:

SetItem Store Value

Purpose: Store value in key field

Usage:. SetItem (key, value)

code example:

Copy Code

The code is as follows:

Sessionstorage.setitem ("Key", "value");

Localstorage.setitem ("Site", "js8.in");

GetItem Get Value

Purpose: Gets the value of the specified key local store

Usage:. GetItem (Key)

code example:

Copy Code

The code is as follows:

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

var site = localstorage.getitem ("site");

RemoveItem Delete key

Purpose: Delete the value locally stored by the specified key

Usage:. RemoveItem (Key)

code example:

Copy Code

The code is as follows:

Sessionstorage.removeitem ("key");

Localstorage.removeitem ("site");

Clear clears all Key/value

Purpose: To clear all key/value

Usage:. Clear ()

code example:

Copy Code

The code is as follows:

Sessionstorage.clear ();

Localstorage.clear ();

Iv. Other methods of operation: Point operation and []

Web Storage can be accessed not only with its own setitem,getitem, but also with dots (.) as normal objects. Operators, and [] the way data is stored, like the following code:

Copy Code

The code is as follows:

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 are traversed

The key () and length provided by Sessionstorage and Localstorage can facilitate the storage of data traversal, such as the following code:

Copy Code

The code is as follows:

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);

}

Vi. Storage Events

Storage also provides the storage event, which triggers the storage event when the key value is changed or clear, as the following code adds a monitoring of the storage event change:

Copy Code

The code is as follows:

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 that is added, removed, or moddified
any	the Previous value (now overwritten), or null if a new item is added
newvalue	the new value, or null If an item is added
string	the page that called thE method So triggered this change