HTML5 storage, html5

Source: Internet
Author: User
Tags sessionstorage

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.