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.
Therefore, sessionStorage is not a persistent local storage, but only a session-level storage. LocalStorage is used for persistent local storage. The data will never expire unless it is actively deleted.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