Detailed explanation of HTMl5 storage methods sessionStorage and localStorage

Detailed explanation of HTMl5 storage methods sessionStorage and localStorage_html5 tutorial skills

WBOY

Release： 2016-05-16 15:48:12

Original

1668 people have browsed it

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, 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)
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("Browsing supports localStorage")
}
else
{
alert("Browsing does not support localStorage")
}
//or if(typeof window.localStorage == 'undefined'){ alert("Browsing does not support localStorage yet") }

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
Usage: Store value into 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 specified key locally Stored value
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 specified Key locally stored value
Usage: .removeItem(key)
Code example:

Copy code

The code is as follows:

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

clear clear all keys/values
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 Not only can you use your own setItem, getItem, etc. for convenient access, but you can also use the dot (.) operator and [] to store data like a normal object, 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. localStorage Implement traversal with the key and length attributes of sessionStorage
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. When the key value changes or is cleared, the storage event can be triggered. 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 attributes 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