HTML5 storage, html5
Abstract:
Data storage is an essential function for each site. Before HTML5, cookies can be used to store local data. However, the cookie can only store 4 kb of data, and the cookie is sent to the server along with the http request, which will inevitably waste bandwidth. Web Storage is a very important feature introduced by HTML5. It can store data locally on the client, similar to the cookie of HTML4. However, it has more powerful functions than cookies, the official recommendation of Web Storage is 5 MB for each website, and the size of data stored in each browser is inconsistent.
There are two types of web storage: localStorage and sessionStorage. The difference between the two is that sessionStorage will be clear when the browser is closed, localStorage is permanently stored locally unless manually deleted. Data is stored locally in the object format. The two storage methods are the same.
Browser:
Method: Add:
if(window.localStorage) {
localStorage.setItem('key', 'value');
}
Delete:
if(window.localStorage) {
localStorage.removeItem('key');
}
Change:
Same as the addition method
Query:
if(window.localStorage) {
localStorage.getItem('key');
}
Delete all data:
if(window.localStorage) {
localStorage.clear();
}
Obtain the key of an index or the key of the data:
if(window.localStorage) {
localStorage.setItem('key', 'data');
console.log(localStorage.key('data')); // output key
}
Extension Method:
Because the data is stored locally as an object, the index object operator can also be used.
if(window.localStorage) {
var storage = window.localStorage;
storage.key1 = "text";
storage["key2"] = "test";
console.log(storage.key1);
console.log(storage["key2"]);
}
Key () and length implement data traversal:
if(window.localStorage) {
var storage = window.localStorage;
for (var i=0, l = storage.length; i < l; i++) {
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
}
Storage event of window:
When the data key value changes or is clear, the storage event is triggered.
If (window. localStorage ){
If (window. addEventListener) {// non-IE
Window. addEventListener ("storage", handler, false );
} Else if (window. attachEvent) {// IE
Window. attachEvent ("onstorage", handler );
}
Function handler (e ){
}
}
Event object attributes:
Attribute |
Type |
Description |
Key |
String |
Key to be added, deleted, or modified |
OldValue |
Any |
The value before it is modified or deleted. If it is added, null is returned. |
NewValue |
Any |
Modified or added value. If it is deleted, null is returned. |
Url/uri |
String |
Current page address |
Demo:
The following example is an online notepad with data stored in localStorage. There are two pages, one is to fill in data, the other is to view
Edit.html
1 <! Doctype html> 2
See.html
1 <! Doctype html> 2
Appendix:
Topic |
Description |
HTMLStorage |
Represents the list of key/value pairs that have been assigned to a single storage area. |
Clear |
Removes all key/value pairs from the Web Storage area. |
GetItem |
Retrieves the current value associated with the Web Storage key. |
InitStorageEvent |
Initializes a new Document Object Model (DOM) storage event thatCreateEventMethod created. |
Key |
Retrieves the key at the specified index in the collection. |
RemoveItem |
Deletes a key/value pair from the Web Storage collection. |
SetItem |
Sets a key/value pair. |
Key |
Gets the key that is updated. |
Length |
Retrieves the length of the key/value list. |
LocalStorage |
Retrieves the Web Storage area specific to the current document. |
NewValue |
Gets the new value ofKey. |
OldValue |
Gets the previous value ofKey. |
RemainingSpace |
Retrieves the remaining memory space, in bytes, for the storage object. |
SessionStorage |
Retrieves the Web Storage area for the session. |
StorageArea |
GetsStorageObject of the affected document. |
Url |
Gets the address of the document that the update affects. |