Local Storage-localStroage/sessionStorage storage, sessionlocalstorage

Local Storage-localStroage/sessionStorage storage, sessionlocalstorage
Client Storage

L WEB Storage

Web storage was initially defined as an API form as part of html5, but was later stripped out as an independent standard. The standard is still in the draft phase, but some of it has been implemented by all mainstream browsers including ie8. The APIS described in the Web storage standard include localStorage objects and sessionStorage objects. These two objects are actually persistently associated arrays, which areThe ing table of name-value pairs. All names and values are strings..

L cookie

Is an early client storage mechanism, initially used for server-side scripts. Although the client provides a very tedious js api to operate on cookies, they are extremely difficult to use and only suitable for storing a small amount of text data. Furthermore, any data stored in the form of cookies, whether or not required by the server, will be transmitted to the server for each http request. Cookie is still widely used by client programmers because all new and old browsers support it. However, with the popularization of web storage, the cookie will eventually return to its original form: as a client storage mechanism used by server scripts.

L IE User Data

IE5 and later ie browsers implement its exclusive client storage mechanism-"userData ". UserData can be used to store a certain amount of string data. In IE browser earlier than IE8, it can be used as an alternative to web storage.

L offline Web Applications

The HTML5 standard defines a level-1 "offline web application" API to cache Web pages and related resources. It stores web applications on the client, not just data. It allows the web application to be "installed" on the client, so that even if the network is unavailable, the web application can still be used.

L file system API

We have previously introduced that mainstream browsers support one file object to upload the selected file to the server through XMLHttpRequest. The related specifications define a level-1 API for operating a private local file system. You can read and write files in the file system. These contents are under intensive standardization. As these APIs are widely implemented and supported, web applications can use file-based storage mechanisms.

LocalStorage and sessionStorage

These two attributes represent the same Storage object, that is, a persistent associated array. arrays are indexed using strings, and stored values are also in the string format. The usage of Storage objects is no different from that of common javascript objects: Set the object attribute to a string value, and then the browser stores the value.

The difference between localStorage and sessionStorage is that the storage has different validity periods and scopes: How long data can be stored and who has data access permissions.

The data stored through localStorage is permanent. Unless the web application deliberately deletes the stored data or the user deletes the data by setting the browser configuration, the data will be kept on the user's computer, never expire. The scope of localStorage is limited at the document source level. The document source is determined by the Protocol and host name port. Files from the same source share the same localStorage data. They can read data from each other, or even overwrite the data of the other party (even if the scripts they run are from the same third-party server ). Note: The scope of localStorage is also limited by browser vendors. If you use firefox to access the site, you will not be able to obtain the data stored last time when you access the site again in another browser.

 

Once the window or tab is permanently closed, all data stored through sessionStorage is also deleted. (Of course, modern browsers have the ability to re-open the recently closed tab and then resume the session feature of the last browser. Therefore, these tabs and sessionStorage related to them may have a longer validity period ). Its scope is also limited in the window. If documents of the same source are rendered on different browsing tabs, some of them have their own sessionStorage data and cannot be shared; the script on one tab cannot read or overwrite the data written by another tab script. Even if the two labels render the same page, they run the same script.

Storage API

It is usually used as a javascript Object: stores string values by setting properties, and queries this property to read values. In addition, these two objects provide more formal APIs.

SetItem ("name", "value"); // set

GetItem ("name"); // read Storage

RemoveItem ("name"); // delete the corresponding data (the delete operator can also be used to delete data in non-IE8)

Clear (); // clear all stored data

The length attribute and the key () method are passed in 0 ~ Length-1 number, which can enumerate the names of all stored data, for example:

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 ");

 

Storage event storage

No matter when the data stored in localStorage or sessionStorage changes, the browser triggers the storage event on other window objects visible to the data (however, does not trigger the window object that changes data.) If the browser has two tab pages that open from the same source, one of the pages stores data on localStorage, then another tab will receive a storage event. The scope of sessionStorage is limited to the top-level window. Therefore, changes to sessionStorage will trigger storage events only when there are related windows. Note that the storage event is triggered only when the storage data changes. Setting the same value for an existing storage item or deleting an existing storage item does not trigger a storage event.

To store event registration handlers, you can use the addEventListener () method or the attachEvent () method. In most browsers, you can use the window object to set the onstorage attribute, which is not supported by Firefox.

The event object related to the storage event has five very important attributes (unfortunately, IE8 does not support it !!!)

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

L newValue: Save the new value of the item; or call removeItem (), the value of this attribute is null.

L oldValue: change or delete the item to save the original value of the item. When a new item is inserted, the attribute value is null.

L storageArea: the attribute value is like the localStroage attribute or sessionStorage attribute on the target Window object.

L url: the URL of the document that triggers the stored change script

Note:LocalStroage and storage events use the broadcast mechanism. The browser will send messages to all windows of the same site currently being accessed..