HTML5 local Storage Web Storage

HTML5 defines the local Storage specification Web Storage and provides two Storage types: API sessionStorage and localStorage. The main difference between them is the data Storage duration and data sharing mode. LocalStorage is stored locally, and data storage is permanent, unless the user or program deletes it; sessionStorage is valid during the session period, and the data is automatically deleted after the browser is closed; localStorage is based on a domain and can be accessed on any page in the domain. sessionStorage is in the window for saving it and is valid for the new window created by the current window until the associated tab is closed; web Storage is actually an improved version of the cookies Storage mechanism in HTML4, but the functions of the two mechanisms are different: cookies are transmitted back and forth between the browser and server, and sessionStorage and localStorage are not; sessionStorage and localStorage have a larger storage space, more rich and easy-to-use interfaces, and their independent storage space. Pay attention to the above differences. During the front-end interview, you only need to ask about html5. Currently, all mainstream browsers support HTML5 Web Storage to a certain extent. It can be seen that almost all modern browsers support Web Storage. Mobile browsers are more optimistic. Both Android and IOS browsers support the local Storage feature of Web Storage. Currently, more and more mobile devices, except android and iphone, are available, and basically rely on two platforms. When using Web Storage on mobile terminals, we almost do not need to consider whether the browser supports it. Of course, from the code rigor, we recommend that you check whether the browser supports copying the Code if (window. localStorage) {// the browser supports localStorage} if (window. sessionStorage) {// the browser supports sessionStorage} to copy the code. Web Storage API to copy the code 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 () ;}; copy the code called DOMString: A UTF-16 String, JavaScript uses this encoding String, so DOMString is equivalent to a String in JavaScript. each storage object provides a list of key/value pairs, called data items. Key can be any string (including empty strings) or value can be any string. The standardized interface provides localStorage. length, a read-only length attribute. You can know how many pieces of data are stored in localStorage. setItem (key, val) stores a piece of data localStorage. getItem (key) obtains the data localStorage through the key. removeItem (key) deletes a piece of data localStorage. clear () clear all key/value pairs items Storage can only store key/value pairs, and only supports string-type data, setItem () the value passed in by the method is automatically converted to the string type. The Conversion Result of the composite data type (Array Object) is the same as that of the toString method. If you want to save other types of data, you need to convert it into a string during storage and then convert it back during reading. Use localStorage to store and read data in JSON format: copy the code // define the JSON Format String var userData = {name: "zichen", age: "24", sex: "male", adress: "Hangzhou"} // stores userData localStorage. setItem ("userData", JSON. stringify (userData); // read userData and assign the value to the variable var newUserData = JSON. parse (localStorage. getItem ("userData"); console. log (newUserData); // Delete userData localStorage. removeItem ("userData "); The replication code sessionStorage browser supports the same situation as localStorage, and the attributes and methods and usage are also consistent with localStorage. If you want to listen to Storage, you can use the built-in event listener of HTML5 Web Storage API to monitor the data. There are any changes to the data in Storage, all Storage listeners can be captured. interface Definition: copy the code interface StorageEvent: Event {readonly attribute DOMString key; readonly attribute DOMString? OldValue; readonly attribute DOMString? NewValue; readonly attribute DOMString url; readonly attribute Storage? StorageArea;}; copy the code key to indicate the key name in the property. Key value before oldValue update. The updated key value of newValue data. The url records the source address when the Storage event occurs. StorageArea points to the Storage object corresponding to the event listener. Use the w3c standard event registration method addEventListener to register the listener: window. addEventListener ("storage", function (e) {console. log (e)}, true );