"Go" Local storage-localstroage/sessionstorage Storage

Original address: "JS Learning note-103"----Local storage-localstroage/sessionstorage Storage client Storage

L Web Storage

Web Storage was originally defined as a form of API as part of the HTML5, but was later stripped out as a separate standard. The standard is still in the draft phase, but some of it has been implemented by all major browsers, including IE8. The API described by the Web Storage standard contains Localstorage objects and Sessionstorage objects, which are actually persisted associative arrays and are mapping tables for name-value pairs. The name value is a string .

L Cookies

is an early client storage mechanism that was originally used for server-side scripting. Although the client provides a very cumbersome JS API to manipulate cookies, they are extremely difficult to use and are only suitable for storing small amounts of textual data. In addition, any data stored as a cookie, regardless of whether the server is needed or not, will be transferred to the server on every HTTP request. One important reason that cookies are still heavily used by client programmers is that all old and new browsers support it, but with the popularity of Web storage, the cookie will eventually return to its original form: as a client-side storage mechanism used by the server script.

L IE User Data

IE5 and the subsequent Internet Explorer implement its proprietary client storage mechanism-----"UserData". UserData can implement a certain amount of string data storage, for IE8 in previous IE browser, it can be used as a Web storage alternative.

L Offline Web application

The HTML5 standard defines a first-level "offline Web application" API to cache Web pages and related resources. It does this by storing the Web app as a whole on the client, not just storing the data. It allows the web app to "install" on the client, so that the Web app is still available for notification even when the network is unavailable.

L Web Database

To enable developers to manipulate large amounts of data like a database, many mainstream browsers begin to integrate the functionality of the client database. Both Safari,chrome and opera have built-in SQL database client APIs. Unfortunately, the standardization of such APIs has failed. And neither IE nor Firefox seems to be implementing this API. There is also a database API that is being standardized, called the Index database API. Calling the API returns a simple database object that does not contain a query language. Both of these client-side database APIs are asynchronous and use event-handling mechanisms.

L File System API

Previously introduced the mainstream browser now supports a file object to upload selected files to the server via XMLHttpRequest. The specifications associated with it define a level one API for manipulating a private local file system. The file system can be read and write to each other. The content is being standardized, and as these APIs are widely implemented and supported, Web applications can use similar file-based storage mechanisms.

Localstorage and Sessionstorage

These two properties represent the same storage object, which is a persisted associative array, which is indexed using a string and the stored values are also in string form. The storage object is no different than a generic JavaScript object: Setting the property of an object is a string value, and then the browser stores the value.

The difference between Localstorage and Sessionstorage is that the storage has a different validity period and scope: how long the data can be stored and who has access to the data.

Data stored through Localstorage is permanent, unless the Web application intentionally deletes the stored data, or the user deletes it by setting the browser configuration, the data remains on the user's computer and never expires. The scope of the localstorage is scoped at the document source level. The document source is determined by the protocol, host name Port three. Documents of the same origin share the same localstorage data. They can read each other's data and even overwrite each other's data (even if they run scripts from the same third-party server). Note: The scope of the localstorage is also limited by the browser vendor. If you use Firefox to access the site, then the next time you use another browser to access again, then this time will not be able to obtain the last stored data.

Sessionstorage stored data, once the window or tab is permanently closed, all data stored through Sessionstorage is deleted. (Of course, the modern browser already has the ability to reopen the recently closed tabs and then resume the last browsing session, so these tabs, and the associated Sessionstorage, may have a longer validity period). Its scope is also limited to the window, if the same-origin documents are rendered in different browsing tabs, then they have their own sessionstorage data, can not be shared; the script in one tab is unable to read or overwrite the data written by another tab page script. Even if these two tags render the same page, they run the same script.

Storage API

Typically used as a JavaScript object: By setting a property to store a string value, query the property to read the value. In addition, these two objects provide a more formal API.

SetItem ("name", "value"); Set up

GetItem ("name"); Read storage

RemoveItem ("name"); Delete the corresponding data (the delete operator is also available for deleting data in non-IE8)

Clear (); Clear all stored data

The length property and the key () method, passed in the 0~length-1 number, can enumerate all stored data names such as:

for (vari=0;i<localstorage.length;i++) {

var name = Localstorage.key (i);

var value = Localstorage.getitem (name);

}

var Memory =window.localstorage | | (Window. Userdatastorage && New Userdatastorage ()) | | New Cookiestroage ();

var userName =memory.getiem ("Uername");

Store Event Storage

Whenever the data stored in localstorage or sessionstorage changes, the browser triggers the store event on other window objects that are visible to the data ( However, it will not be triggered on the window object that changes the data ). If the browser has two tab pages open from the same Origin page, where one page stores data on Localstorage, another tab will receive a storage event. The scope of the Sessionstorage is limited to the top-level window, so the change to sessionstorage only triggers the storage event when there is a window associated with it. also note that storage events are triggered only when the stored data really changes. Setting an identical value to an existing storage item, or deleting a stored item that does not already exist will not trigger the storage event.

In order to store the event registration handler, you can either pass the AddEventListener () method or the Attachevent () method. In most browsers, you can also use the Window object to set the Onstorage property, which is not supported by Firefox.

The event object associated with the storage event has 5 very important properties (unfortunately,IE8 does not support it !!!) ）

L Key: The name or key name of the item being set or removed. If the clear () function is called, the property value is null

L NewValue: Saves the new value of the item, or when RemoveItem () is called, the value of the property is null.

L OldValue: Change or delete the item, save the original value of the item, and when inserting a new item, the property value is null.

L Storagearea: This property value is like the Localstroage property on the target window object or the Sessionstorage property

L URL: The URL of the document that triggered the storage change script

Note:localstroage and storage events are broadcast-based, and the browser sends messages to all windows of the same site that are currently being accessed .

If the a tag on the page is another tab opened through JS's window.open, then the sessionstorage is the same as the previous tab. If you are using the right mouse button "Open in a new tab" then Sessionstorage and the previous tab are not related. But no matter how it is opened, the sessionstorage between the next two tabs does not share information.

"Go" Local storage-localstroage/sessionstorage Storage