Detailed explanation and use of sessionStorage and localStorage of html5

Web Storage in html5 includes two storage methods: sessionStorage and localStorage.

sessionStorage is used to locally store data in a session. These data can only be accessed by pages in the same session and the data will be destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, only session-level storage.

LocalStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.

The difference between web storage and cookies

The concept of Web Storage is similar to cookies, but the difference is that it is designed for larger capacity storage. The size of the cookie is limited, and the cookie will be sent every time you request a new page, which wastes bandwidth. In addition, the cookie needs to specify a 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 setCookie and getCookie themselves.

But Cookies are also indispensable: Cookies are used to interact with the server and exist as part of the HTTP specification, while Web Storage is only created to "store" data locally (Correction from @otakustay)

html5 web storage browser support

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

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

if(window.localStorage){     
    alert("浏览支持localStorage");
}else{    
    alert("浏览暂不支持localStorage");
} //或者 
if(typeof window.localStorage == 'undefined'){ 
    alert("浏览暂不支持localStorage");
}

localStorage and sessionStorage operations

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

methods of localStorage and sessionStorage

setItem stores value

Purpose: Store value into the key field
Usage: .setItem(key, value)
Code example:

sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");

getItem gets value

Purpose: Get the value stored locally in the specified key
Usage: .getItem( key)
Code example:

var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

removeItem delete key

Purpose: delete the value stored locally for the specified key
Usage: .removeItem(key)
Code example:

sessionStorage.removeItem("key"); localStorage.removeItem("site");

clear clear all keys/values

Purpose: clear All key/value
Usage: .clear()
Code example:

sessionStorage.clear(); localStorage.clear();

Other operation methods: point operation and []

Web Storage can not only use its own setItem, getItem, etc. for convenient access, but also can be used as an ordinary object Use the dot (.) operator and the [] method to store data, 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 attributes of localStorage and sessionStorage implement traversal

key() and length provided by sessionStorage and localStorage can be convenient 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); 
}

storage event

storage also provides storage events. When the key value changes or is cleared, the storage event can be triggered. For example, the following code adds a storage event Monitoring of event changes:

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

Property Type Description

key String The named key that was added, removed, or moddified

oldValue Any The previous value (now overwritten), or null if a new item was added

newValue Any The new value, or null if an item was added

url/uri String : Storage Web Storage Example