Use userdata and localstorage for cross-browser Local Storage

From:

Http://www.dewen.org/q/4108/h5%E7%9A%84localStorage%E5%92%8C%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8IE6%E3%80%81IE7%E4%B8%8D%E6%94%AF%E6%8C%81

1. browser support
Userdata is the storage space opened by Microsoft for IE in the system. Therefore, only Windows + IE is supported. Unexpectedly, userdata has been started since ie5.5.

2. storage location
In XP, it is generally located in c: \ Documents ents and Settings \ USERNAME \ userdata, sometimes in c: \ Documents ents and Settings \ USERNAME \ Application Data \ Microsoft \ Internet Explorer \ userdata.
In Vista, It is located at c: \ Users \ User Name \ appdata \ roaming \ Microsoft \ Internet Explorer \ userdata.
Userdata is saved as an XML file.

3. Size Limit
Security Zone document limit (Kb) domain limit (KB)
Local Machine 128 1024
Intranet 512 10240
Trusted Sites 128 1024
Internet 128 1024
Restricted 64-640
For online use, the size of a single file is limited to kb, and the size of a file under a domain name is limited to kb. There should be no limit on the number of files. In a restricted site, these two values are 64kb and 640kb respectively. Therefore, it is best to control a single file under 64kb if you consider various situations.

4. Use
Userdata can be bound to almost all tags.
Instructions are added to the official documents:
Setting the userdata behavior class on the HTML, Head, title, or style object causes an error when the Save or load method is called.

Apply:
A, abbr, acronym, address, area, B, big, BLOCKQUOTE, button, caption, center, cite, code, DD, Del, dfn, Dir, Div, DL, DT, em, Font, form, HN, HR, I, IMG, input type = button, input type = checkbox, input type = file, input type = hidden, input type = image, input type = password,
Input type = radio, input type = reset, input type = submit, input type = text, KBD, label, Li, listing, MAP, marquee, menu, object, ol, option, p, plaintext, pre, Q, S, SAMP, select, small, span, strike, strong, sub, sup, table, textarea, TT, U, UL, VAR, XMP

You can use style or js to create objects that support userdata.
Html
Create JS

 
 

  
  
O = Document. createelement ('input ');
  
  
O. type = 'ddn ';
  
  
O. addbehavior ('# default # userdata ');
  
  
// Equivalent to O. style. Behavior = "URL ('# default # userdata ')";
  
  
Document. Body. appendchild (O );
 
 

Userdata provides the following attributes and methods:

Attribute
Expires setting or read expiration time
Xmldocument reads the xml dom of an object

Method
Getattribute reads the value of a specified attribute
Load Open File
Removeattribute: deletes a specified attribute.
Save save file
Setattribute: assigns a value to a specified attribute.

5. directory restrictions
Localstorage cannot be accessed across regions, while userdata is more strict and cannot be accessed across directories.
For example:

Http://example.com/path1

You can only access the webpage file at http://example.com/path1/example.php.
All files in the http://example.com/path1/path2directory are not stored in path1.

Cookie can be accessed across subdomains by setting domain.

In this case, why not use cookies for local storage?
1. Small capacity, about 4 kb
2. Cookie may be disabled
3. Insufficient cookie Security
4. Each cookie is sent to the server to increase the bandwidth. This is not consistent with our local storage purpose.
4. javascript disabled

6. Encapsulation

 
 

  
  
typeof window.localStorage == 'undefined' && ~function(){
  
  
 
  
  
var localStorage = window.localStorage = {},
  
  
    prefix = 'data-userdata',
  
  
    doc = document,
  
  
    attrSrc = doc.body,
  
  
    html = doc.documentElement,
  
  
 
  
  
    // save attributeNames to  
  
    // data-userdata attribute
  
  
    mark = function(key, isRemove, temp, reg){
  
  
 
  
  
        html.load(prefix);
  
  
        temp = html.getAttribute(prefix);
  
  
        reg = RegExp('\\b' + key + '\\b,?', 'i');
  
  
 
  
  
        hasKey = reg.test(temp) ? 1 : 0;
  
  
 
  
  
        temp = isRemove ? temp.replace(reg, '').replace(',', '') : 
  
  
                hasKey ? temp : temp === '' ? key :
  
  
                    temp.split(',').concat(key).join(',');
  
  
 
  
  
 
  
  
        html.setAttribute(prefix, temp);
  
  
        html.save(prefix);
  
  
 
  
  
    };
  
  
 
  
  
// add IE behavior support
  
  
attrSrc.addBehavior('#default#userData');
  
  
html.addBehavior('#default#userData');
  
  
 
  
  
// 
  
  
localStorage.getItem = function(key){
  
  
    attrSrc.load(key);
  
  
    return attrSrc.getAttribute(key);
  
  
};
  
  
 
  
  
localStorage.setItem = function(key, value){
  
  
    attrSrc.setAttribute(key, value);
  
  
    attrSrc.save(key);
  
  
    mark(key);
  
  
};
  
  
 
  
  
localStorage.removeItem = function(key){
  
  
    attrSrc.removeAttribute(key);
  
  
    attrSrc.save(key);
  
  
    mark(key, 1);
  
  
};
  
  
 
  
  
// clear all attributes on <body> that using for textStorage 
  
  
// and clearing them from the 'data-userdata' attribute's value of  
  
localStorage.clear = function(){
  
  
 
  
  
    html.load(prefix);
  
  
 
  
  
    var attrs = html.getAttribute(prefix).split(','),
  
  
        len = attrs.length;
  
  
 
  
  
    for(var i=0;i<len;i++){
  
  
        attrSrc.removeAttribute(attrs[i]);
  
  
        attrSrc.save(attrs[i]);
  
  
    };
  
  
 
  
  
    html.setAttribute(prefix,'');
  
  
    html.save(prefix);
  
  
 
  
  
};
  
  
 
  
  
}();
 
 

7. available frameworks
(1) store. js
Store. JS is a lightweight JS framework.
Store. Set ('key', 'value') and store. Get ('key', 'value') basically meet the requirements. If it is stored and parsed in JSON format, JSON. js should be used to make ie support JSON objects. In addition to the native JavaScript, you can also find the jquery version of store. js.
(2) Others
Ustore. js https://github.com/hugeinc/USTORE.js.
Box. js https://github.com/kbjr/Box.js

8. Reference

Http://news.ycombinator.com/item? Id = 1468802

Http://msdn.microsoft.com/en-us/library/ms531424%28v=VS.85%29.aspx

Http://www.cnblogs.com/QLeelulu/archive/2008/03/29/1129322.html

Http://sofish.de/1872

As for localstorage, I will not talk about it.