This article mainly introduces the usage and some features of Localstorage and Sessionstorage, as well as some other methods of storage comparison.
customer-side storage solutions include the following:1, Cookie 2, UserData 3, Flash sharedobject 4, Google Gears 5, Web SQL Database 6, WebStorage 7, IndexedDB (Inde Xed Database) Put the cookie aside, the above several storage scheme 2-5 is not recommended to use, the reason see below detailed. Leave the cookie open, regardless, because it is indispensable, the role of cookies is to interact with the server as part of the HTTP specification. These other scenarios are designed to "store" data locally. The 6th option is recommended for the time being, but since WebStorage is only compatible with ie8+, he needs to use it with userdata (for compatibility), as described below.
Cookies
Skip over ...
UserData
It is referenced by Microsoft Corporation in IE5 and is a piece of persistent session data stored locally on the user, unless you manually delete or set the expiration time, otherwise it will remain on the local terminal and only IE5-IE9 support. It uses the behaviour property of DHTML to store local data, and no page has a maximum limit of 64K data, with a maximum limit of 640K data per site.Cons: Not Web standards, only IE5-IE9 support, cannot effectively resolve browser compatibility.
Flash SharedobjectIt allows you to store all flash supported data (number, String, Array, Boolean, Object, XML, etc.) on your local client's hard disk or server, and the data will be persisted, without expiration, by setting the manager or by calling Clear () Method is cleared. Local shared objects and remote shared objects can be grouped by location. The default storage size is 100KB, and the user can manually set the maximum to 10M.Cons: It's a disadvantage because it's flash. Flash has the shortcomings of security, poor stability, good system resources and so on.
Google GearsGoogle published in 07 an open source browser plug-in, built-in a sqlite-based embedded SQL database, and provide a unified API access to the database. After obtaining authorization from the user, each site can store an unlimited amount of data in the database. But Google has abandoned its support in Chrome 12.0.Cons: Just because Google has given up on it
Web SQL DatabaseHTML5 introduces a scheme for handling large amounts of structured data. It is the API that uses SQL to manipulate the client database, the language used in the specification is Sqllite, but the scheme is largely obsolete. Because the specifications have ceased to use this specification. Cons: It's because the user has stopped using this specification, which means it's an obsolete standard.
Web Storage
This is a recommended storage scheme for this article, so a detailed introduction will be made. 1. Introduction
Web Storageis made up of two parts:
Localstorage, Sessionstorage。 The localstorage is used for persistent data storage and is not actively deleted, and the data is never expired (including clearing the cache). Sessionstorage as the name implies (session) is used to store data in a session, when the session end data will be destroyed. Therefore, Sessionstorage cannot be used for persistent data storage. Storage form: Key Value name values to storage space:
IE:10MB, CHROME4+,SAFARI4+:2.5MB, FIREFOX4+,OPERA10.5+:5MBCompatible:
ie8+;chrome4+; firefox3.5+; safari4+; opera10.5+ Properties and Methods: SetItem (key,value) Store value values to local key field GetItem (key) Get the value of the specified key locally stored RemoveItem (key) &NBS P Delete the value of the specified key locally stored Clear () &nbs P &nbs P Delete all stored data key (index) &NBS P get a key name at the specified location by index length   ; get the number of stored key-value pairs : Localstorage.setitem ("name", "Ch"); Store (Modify) a key value of NAMe data, and the value is:ch Localstorage.getitem ("name"); Gets the value of the key value for name Localstorage.reomveitem ("name"); Delete the key value for name data localstorage.clear ();//Clear all data stored in localstorage
Note: 1, Sessionstorage method Ibid.
2, this scheme holds a string, if it is JSON data, you have to call the Stringify () method into a string and then save. Event: Storage This event is triggered when data from Localstorage and Sessionstorage is changed, and the storage event has the following properties: Storageaera: Indicates the storage type (session or local) Key: Changed key Oldvalue:key original value Newvalue:key changed value URL: URL that causes key to change ://If localstorage data is stored key:name,value:ch window.addeventlistener ("Storage", function (e) {
Console.log ("changed key:" +e.key);
Console.log ("Old value:" +e.oldvalue);
Console.log ("New value:" +e.newvalue);
Console.log ("changed URLs:" +e.url);
}); Localstorage.setitem ("name", "Huihui"); Page app/list.html The above code will output the changed key:name old value: Ch new value: Huihui changed Url:app /list.html type: Local Another thing to note is that the triggering of the storage event in Firefox and Chrome is a little different, and the page call SetItem () changes the value of a key without triggering the storage event of the window. , but if you access both a.html and b.html, calling SetItem () in the a page changes the value of a key to trigger the storage event in page B, and vice versa. In IE9, the storage event of a window can also be triggered by the SetItem () of its own page, which changes the value of a key. Disadvantage: ie7-is not supported and needs to be compatible with UserData if required.
WebStorage has the advantages of large capacity, ease of use, and native support, making it the preferred local storage solution, but it is also less secure and cannot be used to store sensitive information. Indexeddbindexed database, introduced by Oracle in 2009, is a INDEXEDDB that allows you to store structured data in a user's browser for a long term, providing a rich query capability for Web applications. It uses objects to save data, assign independent space by domain name, a separate domain name can create multiple databases, each database can create multiple object storage space, an object storage space is equivalent to a database table, can store multiple object data. Currently only CHROME11+/FIREFOX4+/IE10 support. The firefox4+ supports storage of up to 50MB of data (mobile 5MB) and chrome11+ supports up to 5MB of data.Cons: Currently only chrome11+/firefox4+/ie10+ support
How to use Localstorage and sessionstorage and introduce some features
