HTML5 storage, html5

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.