Detailed explanation of HTMl5 storage methods sessionStorage and localStorage

This article mainly introduces the detailed explanation of HTMl5 storage methods sessionStorage and localStorage. It has certain reference value. Now I share it with you. Friends in need can refer to it.

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.
1. The difference between web storage and cookies
The concept of Web Storage is similar to that of cookies. 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)
2. Browser support for html5 web storage
Except for IE7 and below, other standard browsers are fully supported (ie and FF need to be in the web server) Run), it is worth mentioning that IE always does 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:

Copy the code

The code is as follows:

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

3. LocalStorage and sessionStorage operations
Both 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 in the 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 gets value

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

Copy code

The code is as follows:

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

removeItemDelete key

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

Copy code

The code is as follows:

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

clear clear all key/value

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

Copy code

The code is as follows:

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

4. Other operation methods: point operation and []
Web Storage can not only use its own setItem, getItem, etc. for convenient access, but can also use the dot (.) operator and [] like ordinary objects to store data, 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"]);

5. The key and length attributes of localStorage and sessionStorage Implementing traversal
The key() and length provided by sessionStorage and localStorage can easily implement traversal of stored data, 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); 
}

6. Storage event
Storage also provides storage events, which can be triggered when the key value changes or is cleared. storage event, for example, the following code adds a listener for storage event changes:

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 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	The page that called the method that triggered this change

相关推荐：

HTML5所有标签汇总及标签意义解释

The above is the detailed content of Detailed explanation of HTMl5 storage methods sessionStorage and localStorage. For more information, please follow other related articles on the PHP Chinese website!