Detailed explanation of HTML5 storage methods sessionStorage and localStorage

Comment: Web Storage in html5 includes two storage methods: sessionStorage and localStorage. sessionStorage is used to store data in a session locally, which can only be accessed on pages in the same session and the data will be destroyed after the session is over.

1. The difference between web storage and cookies

The concept of Web Storage is similar to cookies, the difference is 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 will be sent over, which invisibly wastes bandwidth. In addition, the cookie needs to be specified scope and cannot be called across domains.

In addition, Web Storage has setItem, getItem, removeItem, clear and other methods. Unlike cookies, front-end developers need to encapsulate setCookies and getCookies themselves.

But cookies are also indispensable: the function of cookies is to interact with the server and exists as part of the HTTP specification, while Web Storage is only created to store data locally (correction from @otakustay)

2. The browser support status of html5 web storage

Except for IE7 and below, other standard browsers fully support it (ie and FF need to run on the web server). It is worth mentioning that IE always does good things. For example, UserData in IE7 and IE6 are actually a solution for local storage of javascript. Through simple code encapsulation, it can be unified to all browsers that support web storage.

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

alert("Browse support localStorage")

}

else

{

alert("Browsing does not support localStorage")

}

//or if(typeof window.localStorage == 'undefined'){ alert("Browsing does not support localStorage") }

3. LocalStorage and sessionStorage operations

localStorage and sessionStorage both have the same operation methods, such as setItem, getItem and removeItem, etc.

Methods of localStorage and sessionStorage:

setItem storage value

Purpose: Store value in key field

Usage: .setItem( key, value)

Code example:

localStorage.setItem("site", "js8.in");

getItem get value

Purpose: Get the value stored locally in the specified key

Usage: .getItem(key)

Code example:

var site = localStorage.getItem("site");

removeItem delete key

Purpose: Delete the value stored locally in the specified key

Usage: .removeItem(key)

Code example:

localStorage.removeItem("site");

clear clear all key/value

Purpose: Clear all key/values

Usage: .clear()

Code example:

localStorage.clear();

4. Other operating methods: point operation and []

The web Storage can not only use its own setItem, getItem, etc. to facilitate access, but also use the dot (.) operator and [] method to store data like ordinary objects, like the following code:

var storage = window.localStorage; storage.key1 = "hello";

storage["key2"] = "world";

console.log(storage.key1);

console.log(storage["key2"]);

5. The key and length properties of localStorage and sessionStorage are implemented to traverse

Key() and length provided by sessionStorage and localStorage 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);

}

6. Storage Events

Storage also provides storage events. When the key value changes or clear, the storage event can be triggered. For example, the following code adds a listening for storage event changes:

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 as follows:

PropertyTypeDescription

keyStringThe named key that was added, removed, or modified

oldValueAnyThe previous value(now overwritten), or null if a new item was added

newValueAnyThe new value, or null if an item was added

url/uriStringThe page that called the method that triggered this change