Local storage in HTML5 replaces Cookie:qext. localstorage Example

Background
Take a look at the changes in local storage:
Cookies: Browser support, capacity of 4KB
UserData: Only IE support, capacity of 64KB
flash:100kb
Google Gears SQLite: Require plug-in support, unlimited capacity
LOCALSTORAGE:HTML5, capacity is 5M

It is now ready to attempt to replace the cookie implementation in the project, the basic analysis is as follows:
Each time interacting with the server, cookies will be carried in the request, too many cookies, also cause a waste of bandwidth
Cookies are small and may not meet the local storage needs of today's Internet
In ie8+, firefox3.0+, opera10.5+, chrome4.0+, safari4.0+, iphone2.0+, andrioid2.0+ and other platforms, has fully supported HTML5 Localstorage
In IE7, which is the following version, you can use UserData instead of cookies, and it's also better than cookie insurance
The user may clear the cookie, but do not necessarily know to clear userdata or localstorage, which also enhances a code insurance

What do you use to replace it?
UserData: Only IE available
Flash: The storage space is enough, also quite good, but this thing is not the HTML native
Google Gears: There is no limit to storage space, is to install additional Plug-ins
Html5-localstorage: The official recommendation is that each site can store 5M of content locally, very large
Finally analyze the browser we are targeting now: IE series, FF, Chrome, Safari, Opera, plus dual-core roaming, QQ browser, Sogou browser
Among them, now FF, Chrome, Safari, Opera has fully supported Html5-localstorage
Dual-core browsers, either webkit the kernel or IE kernel (mostly IE8), so these are also supported Html5-localstorage
Finally, IE7 and the following version, for the special IE, they provide their own userdata, processing is very convenient
Summary: Replace cookie! with the way UserData and Html5-localstorage are combined

Storage of UserData:
2011-03-23_201627.png
The UserData behavior saves data by writing it to a UserData store (UserData store), UserData can save the data in XML format on the client computer.
The data will always exist unless you artificially delete or use a script to set the expiration period of the data.
From the above table can be seen, even a limited (restricted) site, a single document can save 64KB of data, the entire domain can be installed 640KB of things.

To learn more about UserData, you can click here.

About expires
We all know that the use of cookies for local data caching, you can set a lifecycle, in IE, using UserData to replace, can be a perfect implementation.
However, the localstorage provided by HTML5 does not provide a ready-made API to set the lifecycle of a local storage, and can only take some extreme measures to simulate the implementation.

About bulk storage, extraction, and deletion of data
A useful component library should provide a more convenient API, native cookies, UserData, localstorage do not provide out-of-the-box interfaces to invoke, so here we wrap one so that it has such a batch interface.

Code implementation
1, IE in the UserData implementation
The simple principle is to create an HTML node and add a behavior to it (behavior): #default #userdata, put the data to be stored on the node's properties (SetAttribute), and save it locally (save).

To create an HTML instance:
/**
* Create and get this Input:hidden instance
* @return {htmlinputelement} Input:hidden instance
* @private
*/
function _getinstance () {
Bind the UserData to the Input:hidden.
var _input = null;
Yes, don't be surprised, every time you create a input:hidden and add it to the DOM tree.
The goal is to avoid data being repeatedly written, causing "disk space to fill up" exception
_input = document.createelement ("input");
_input.type = "hidden";
_input.addbehavior ("#default #userdata");
Document.body.appendChild (_input);
return _input;
}
Local Data storage:
/**
* Save data in UserData to local file name: File name: Config.key[1].xml
* @param {String} key is the key to store the data, and the key in the config parameter is the same
* @param {Object} config to store data related configuration
* @cofnig {String} key to store data
* @config {String} value to store the contents of the data
* @config {String| Object} [expires] the expiration time of the data, either as a number, in milliseconds, or as a Date object indicating the expiration time
* @private
*/
function __setitem (key,config) {
try {
var input = _getinstance ();
Create a Storage object
var storageinfo = Config | | {};
Set Expiration Time
if (storageinfo.expires) {
var expires;
If the expires in the set item is a number, the number of milliseconds that the data can survive
if (' number ' = = typeof storageinfo.expires) {
expires = new Date ();
Expires.settime (Expires.gettime () + storageinfo.expires);
}
Input.expires = Expires.toutcstring ();
}

Storing data
Input.setattribute (Storageinfo.key,storageinfo.value);
Store to local file, file name: Storageinfo.key[1].xml
Input.save (Storageinfo.key);
catch (e) {
}
}

Look again at the UserData local data read:
/**
 * extract locally stored data
 * @param {String} config for storage data related configuration
 * @cofnig { String} key
 * @return {String} for the data stored locally, returns null
 * @example
 * Qext When it is not obtained. Localstorage.get ({
 *      key: "username"
 *});
 * @private
 */
Function _getitem (config) {
    try {
        var input = _getinstance ();
       //loading local files, file name: Config.key[1].xml
         input.load (Config.key);
       //Get Data
        return Input.getattribute (Config.key) | | Null
   } catch (e) {
        return null;           
   }
}

Simulate remove operation:
/**
* Remove an item from storing data
* @param {Object} config parameters
* @cofnig {String} key to store data
* @private
*/
function _removeitem (config) {
try {
var input = _getinstance ();
Loading storage Blocks
Input.load (Config.key);
To remove a configuration item
Input.removeattribute (Config.key);
Force it to expire
var expires = new Date ();
Expires.settime (Expires.gettime ()-1);
Input.expires = Expires.toutcstring ();
Input.save (Config.key);

Remove the current key from the Allkey
The following code is used to record the currently saved key for later ClearAll
var result = _getitem ({key: _clearallkey});
if (result) {
result = Result.replace (new RegExp (^|\\|) "+ Config.key +" (\\| | $) ", ' G '), '");
result = {
Key: _clearallkey,
Value:result
};
Save Key
__setitem (_clearallkey,result);
}

catch (e) {
}
}

2, then look at the simulation of the expires in the Html5-localstorage:
in the data storage, a single more than one field: Key + ". Expires", if the incoming expires is a numeric type, the unit is milliseconds (ms)
Window.localStorage.setItem (Storageinfo.key,storageinfo.value);
//If you want to specify a lifecycle
if (config.expires) {
    var expires;
   // If the expires in the set item is a number, the number of milliseconds that the data can survive
    if (' numbers ' = typeof storageinfo.expires) {
  & nbsp;     expires = new Date ();
        Expires.settime (expires.gettime () + storageinfo.expires);
   }
 
    window.localStorage.setItem (Storageinfo.key + ". Expires", expires);
}

When data is read, universal reads this field to determine whether the time exceeds the lifecycle
result = Window.localStorage.getItem (Config.key);
Expiration time judgment, if expired, remove the item
if (result) {
var expires = Window.localStorage.getItem (Config.key + ". Expires");
result = {
Value:result,
Expires:expires? New Date (expires): null
};
If (Result && result.expires && result.expires < new Date ()) {
result = NULL;
Window.localStorage.removeItem (Config.key);
}
}

3. Extract all key
/**
* Get all the local storage data corresponding to the key
* <pre><code>
* var keys = Qext. Localstorage.getallkeys ();
* </code></pre>
* @return {Array} all key
*/
Getallkeys:function () {
var result = [];
Browsers that support local storage: ie8+, firefox3.0+, opera10.5+, chrome4.0+, safari4.0+, iphone2.0+, andrioid2.0+
if (_issupportlocalstorage) {
var key;
for (var i = 0,len = Window.localstorage.length;i < len;i++) {
Key = Window.localStorage.key (i);
if (!/.+\.expires$/.test (key)) {
Result.push (key);
}
}
else if (_issupportuserdata) {//IE7 and the following version, using the UserData method
result = _getallkeys ();
}

return result;
}

4, clear all locally stored data
/**
 * Clear all locally stored data
 * <pre><code>
 * Qext. Localstorage.clearall ();
 * </code></pre>
 */
Clearall:function () {
   //support for local storage browsers: IE8 +, firefox3.0+, opera10.5+, chrome4.0+, safari4.0+, iphone2.0+, andrioid2.0+
    if (_ Issupportlocalstorage) {
        window.localStorage.clear ();
    } else if (_issupportuserdata) {//IE7 and the following version, using the UserData method
        _ ClearAll ();
   }
}

about how to use
1, data storage: Qext. Localstorage.set
Save a single object to a local
Qext. Localstorage.set ({
Key: "Username",
Value: "Baiduie",
expires:3600 * 1000/* unit: ms*/
});

Save multiple objects
Qext. Localstorage.set ([{
Key: "Username",
Value: "Baiduie",
expires:3600 * 1000/* unit: ms*/
},{
Key: "Password",
Value: "Zxlie",
expires:3600 * 1000/* unit: ms*/
}]);

2, Data extraction: Qext. Localstorage.get
Gets a local store with the return value of: {key: "", Value: "", Expires: ""}, the return value is not when the value is: null
var rst = Qext. Localstorage.get ({
Key: "Username"
});

Gets more than one local store, the return value is: ["," "," "], and the value returned when the value is not fetched: [Null,null,null]
Qext. Localstorage.get ([{
Key: "Username"
},{
Key: "Password"
},{
Key: "Sex"
}]);
3, Data deletion: Qext. Localstorage.remove
Delete a local storage entry
Qext. Localstorage.remove ({
Key: "Username"
});

Delete multiple local storage items
Qext. Localstorage.remove ([{
Key: "Username"
},{
Key: "Password"
},{
Key: "Sex"
}]);
4, clear all data: Qext. Localstorage.clearall
Empty all locally stored data
Qext. Localstorage.clearall ();
5, get all the local storage key:qext. Localstorage.getallkes
Get all locally stored key
var keys = Qext. Localstorage.getallkeys ();