Interpreting cookie,localstorage,sessionstorage usage and differences 2 (interpreting cookies)

Speaking of local storage

HTML5 provides two new ways to store data on the client:

• Localstorage-Persistent storage (data can be deleted manually)
• Sessionstorage-session temporary reply, temporary storage from page open to page Closed Time window, page closed, local storage disappears

In fact, the foreground and the role and the cookie is the same or even from the cookie evolved, with a picture to indicate the service provider to the local storage exploration.

From the diagram you can see the difference between local storage and cookies, storage large and no plug-ins.

It might be time to think about the H5 's biggest problem compatibility, which is a local storage support scenario map.

Detection:

if (window.localstorage) {
Alert (' This browser supports Localstorage ');
}else{
Alert (' This browser does not support Localstorage ');
}

How to use:

Window.localstorage.a = 3;// set a to "3"
Localstorage["a"] = "SFSF";// set a to "SFSF", overriding the above value
Localstorage.setitem ("B", "Isaac");// set b to "Isaac"
var A1 = localstorage["A"];// gets the value of a
var a2 = localstorage.a;// gets the value of a
var B = Localstorage.getitem ("b");/ / get the value of B
Localstorage.removeitem ("C");/ / clears the value of C

Let's look at them like Sherlock Holmes. There are three ways to set and get the nuances between them, and readers should consider them as appropriate. The point plus attribute is used more. you can add window or no, because page appears is considered a property and method of window.

summarize the characteristics of localstorage and Sessionstorage

1. No time limit

2. Large capacity

3. No plugins

4. Can not directly use local storage like server request

5. Client completion does not request server

6.sessionStorage data is not shared, Localstorage shared

application Example 1

Form save if you do an interaction when filling out a form to fill in half of the time to go away, you need to close the browser, when you open the page also want the form to fill the status.

Local Storage Events

Window.addeventlistener (' Storage ', function (EV) {///Current page event does not trigger
alert (123);

Console.log (Ev.key);
Console.log (Ev.newvalue);
Console.log (Ev.oldvalue);
Console.log (Ev.storagearea);
Console.log (Ev.url);

},false);

Only Firefox and Safari support Chrome is not supported, so you can save your instance in a shopping cart.

The storage event is triggered when the data is modified or deleted

The Key that will not be triggered on the window object that changes the data:

The key value to modify or delete, if called clear (), key is null

NewValue: The newly set value, if called removestorage (), Key is null

OldValue: The value before the change is called Storagearea: the current storage object

URL: The URL of the document that triggered the change of the script note: Session with the window can be, example: IFRAME operation

Because of the compatibility problem more instances are not written to want to understand can Bo master contact.

the difference from a cookie

1.cookie need to encapsulate our methods local storage is already self-bringing method, easy to use

2.cookie client server side, will request the server (can be observed in the header information)

3. Large storage capacity

Interpreting cookie,localstorage,sessionstorage usage and differences 2 (interpreting cookies)