HTML5 webstorage (HTML5 Local storage technology) _css/html

WebStorage is one of the local storage solutions in HTML5, eliminating IE User Data, Flash cookies, Google gears, and so on, before the introduction of the HTML5 WebStorage concept, A browser-compatible local storage scenario uses cookies only. Some students may ask, since there is a cookie local storage, why also introduce the concept of webstorage?

Is the cookie swollen?

The flaw in the cookie is very obvious

1. Data size: As a storage container, the size of the cookie is limited to about 4KB this is very pit dad, especially for now complex business logic requirements, 4KB capacity in addition to storing some configuration fields also simple single value information, for the vast majority of developers really do not know what to expect.
2. Security issues: Because cookies in an HTTP request are passed in plaintext (https is not), the security issue is significant.
3. Network Burden: We know that cookies will be attached to each HTTP request, in the header of HttpRequest and HttpResponse are to be transmitted, so virtually increased some unnecessary loss of traffic.

WebStorage

WebStorage is one of the new local storage solutions for HTML, but not the standard set to replace cookies, which is necessary to handle client and server communications as part of the HTTP protocol, and the session is dependent on the implementation of client state retention. The intent of webstorage is to solve the local storage of cookies that should not have been done by cookies.
WebStorage provides two types of api:localstorage and sessionstorage, the difference between the two to see the name is probably understood, Localstorage permanent storage of data locally, unless explicitly deleted or emptied, The data stored by Sessionstorage is only valid during the session and is automatically deleted when the browser is closed. All two objects have a common API.

Copy Code code as follows:

Interface Storage {
ReadOnly attribute unsigned long length;
Domstring? Key (unsigned long index);
Getter Domstring GetItem (domstring key);
Setter creator void SetItem (domstring key, domstring value);
deleter void RemoveItem (domstring key);
void Clear ();
};

1, Length: Unique properties, read-only, to get the number of key value pairs within the storage.
2, Key: According to index to get storage key name
3, GetItem: According to the key to obtain the corresponding value within the storage
4. SetItem: Add key value pairs for storage
5, RemoveItem: According to the key name, delete key value pairs
6. Clear: Empty storage objects

WebStorage How to use

In a browser that implements WebStorage, the page has two global objects Localstorage and Sessionstorage

Take Localstorage For example, see a simple code of action

Copy Code code as follows:

var ls=localstorage;
Console.log (ls.length);//0
Ls.setitem (' name ', ' Byron ');
Ls.setitem (' Age ', ' 24 ');
Console.log (ls.length);//2

Traverse Localstorage
for (Var i=0;i<ls.length;i++) {
/*
Age:24
Name:byron
*/
var key=ls.key (i);
Console.log (key+ ': ' +ls.getitem (key));
}

Ls.removeitem (' age ');


for (Var i=0;i<ls.length;i++) {
/*
Name:byron
*/
var key=ls.key (i);
Console.log (key+ ': ' +ls.getitem (key));
}
Ls.clear ();//0
Console.log (ls.length);

Event

At the same time, HTML5 provides a storage event that triggers when webstorage changes, and can be used to monitor changes to storage on different pages.

Copy Code code as follows:

Interface Storageevent:event {
readonly attribute domstring key;
ReadOnly attribute domstring? OldValue;
ReadOnly attribute domstring? NewValue;
readonly attribute domstring URL;
ReadOnly attribute Storage? Storagearea;
};

1, Key: Key value pairs
2, OldValue: Before the change value
3, NewValue: After the modified value
4, URL: Trigger The change of the page URL
5, Storagearea: Changes in the storage

Define in index.php

Copy Code code as follows:

<a href= "test.php" target= "_blank" >Test</a>

Copy Code code as follows:

Window.addeventlistener (' Storage ', function (e) {
Console.log (e.key+ ' is changed form ' +e.oldvalue+ ' to ' +e.newvalue+ ' by ' +e.url);
Console.log (E.storagearea ==localstorage);
},false);

Localstorage.setitem (' UserName ', ' Byron ');

test.php

Copy Code code as follows:

Localstorage.setitem (' UserName ', ' Casper ');

You can see the index.php console output log when you click on the index.php page link to access test.php:
UserName is changed form Byron to Casper by http://localhost/test.php
True

Why is it better than cookies?

1. Speaking from the capacity of WebStorage General browser to provide 5 m of storage space, used to store video, pictures of God horse is not enough, but for most of the operation enough
2. Security WebStorage is not a browser sent as an HTTP header, so it is relatively secure
3. From the traffic, because the webstorage is not transferred to the server, so unnecessary traffic can be saved, so for high-frequency access or mobile phone devices for the Web page is very good.
This does not mean that webstorage can replace cookies, but with webstorage cookies can only do what it is supposed to do--as a channel for client-server interaction, keeping the client state. So just as a local storage solution WebStorage is superior to cookies.

where you need attention.

1. Browser compatibility, this is almost all HTML5 new features are the easiest to implement, because ie8+ browser support, in IE7, IE6 can use the IE user Data implementation.

2. Because Localstorage and Sessionstorage are objects, I am hungry every year can also get and modify key-value pairs through ". Key" or "[key]", but this is not recommended. Copy Code code as follows: Localstorage.username= ' Frank '; Console.log (localstorage[' userName ')); 3. Although Localstorage is stored locally, different browser storage data is independent, so the localstorage stored on Chrome is not available on Firefox. 4. Localstorage and Sessionstorage can only store string types, for complex objects can be handled using the stringify and parse of JSON objects provided by ECMAScript, and low version ie can use Json2.js 5. In addition to the console, Chrome provides a very intuitive way to display the local storage, which is handy when debugging