首頁 > 其他

使用userdata和localstorage做跨瀏覽器本地儲存

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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.瀏覽器支援
userData是微軟為IE在系統中開闢的儲存空間。因此只支援windows+IE。意外的是從IE5.5就已經開始userData了。

2.儲存位置
在XP下，一般位於C:\Documents and Settings\使用者名稱\UserData，有些時候會在C:\Documents and Settings\使用者名稱\Application Data\Microsoft\Internet Explorer\UserData。
在Vista下，位於C:\Users\使用者名稱\AppData\Roaming\Microsoft\Internet Explorer\UserData。
userData的儲存形式為XML檔案。

3.大小限制
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
線上使用時，單個檔案大小限制為128KB,一個網域名稱下檔案大小限制為1024KB,檔案數應該沒有限制。在受限網站裡這兩個值分別是64KB和640KB，所以如果考慮到各種情況的話，單個檔案最好能控制64KB以下。

4.使用
userData可以綁定到，幾乎所有標籤上。
官方文檔還加了說明:
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 to:
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

可以使用style方式也可以用js來建立支援userData的對象。
html方式
js建立

 
    
  
  1. o=document.createElement(‘input’);
    2. 
  
  2. o.type=’hidden’;
    3. 
  
  3. o.addBehavior(‘#default#userData’);
    4. 
  
  4. //等同於 o.style.behavior=”url(‘#default#userData’)”;
    5. 
  
  5. document.body.appendChild(o);
    6.

userData提供了以下屬性和方法

屬性
expires 設定或者讀取到期時間
XMLDocument 讀取檔案的XML DOM

方法
getAttribute 讀取指定屬性的值
load 開啟檔案
removeAttribute 刪除指定的屬性
save 儲存檔案
setAttribute 為指定屬性賦值

5.目錄限制
localStorage不能跨域訪問，而userData更加嚴格，不能跨目錄訪問。
如:

http://example.com/path1

只能是http://example.com/path1/example.php目錄下網頁檔案才可訪問 。
而http://example.com/path1/path2目錄下所有檔案是訪問不到path1儲存的資料的。

cookie通過設定domain可以跨子域訪問。

既然這樣，為什麼不用cookie來做本地儲存？
1.容量小，約4KB
2.cookie可能被禁用
3.cookie不夠安全
4.每次cookie都被發送到服務端，增加頻寬。這和我們做本地儲存的目的不符。
4.javascript被禁用的情況

6.封裝

 
    
  
  1. typeof window.localStorage == 'undefined' && ~function(){
    2. 
  
  2.  
    3. 
  
  3. var localStorage = window.localStorage = {},
    4. 
  
  4.     prefix = 'data-userdata',
    5. 
  
  5.     doc = document,
    6. 
  
  6.     attrSrc = doc.body,
    7. 
  
  7.     html = doc.documentElement,
    8. 
  
  8.  
    9. 
  
  9.     // save attributeNames to <html>'s
    10. 
  
  10.     // data-userdata attribute
    11. 
  
  11.     mark = function(key, isRemove, temp, reg){
    12. 
  
  12.  
    13. 
  
  13.         html.load(prefix);
    14. 
  
  14.         temp = html.getAttribute(prefix);
    15. 
  
  15.         reg = RegExp('\\b' + key + '\\b,?', 'i');
    16. 
  
  16.  
    17. 
  
  17.         hasKey = reg.test(temp) ? 1 : 0;
    18. 
  
  18.  
    19. 
  
  19.         temp = isRemove ? temp.replace(reg, '').replace(',', '') : 
    20. 
  
  20.                 hasKey ? temp : temp === '' ? key :
    21. 
  
  21.                     temp.split(',').concat(key).join(',');
    22. 
  
  22.  
    23. 
  
  23.  
    24. 
  
  24.         html.setAttribute(prefix, temp);
    25. 
  
  25.         html.save(prefix);
    26. 
  
  26.  
    27. 
  
  27.     };
    28. 
  
  28.  
    29. 
  
  29. // add IE behavior support
    30. 
  
  30. attrSrc.addBehavior('#default#userData');
    31. 
  
  31. html.addBehavior('#default#userData');
    32. 
  
  32.  
    33. 
  
  33. // 
    34. 
  
  34. localStorage.getItem = function(key){
    35. 
  
  35.     attrSrc.load(key);
    36. 
  
  36.     return attrSrc.getAttribute(key);
    37. 
  
  37. };
    38. 
  
  38.  
    39. 
  
  39. localStorage.setItem = function(key, value){
    40. 
  
  40.     attrSrc.setAttribute(key, value);
    41. 
  
  41.     attrSrc.save(key);
    42. 
  
  42.     mark(key);
    43. 
  
  43. };
    44. 
  
  44.  
    45. 
  
  45. localStorage.removeItem = function(key){
    46. 
  
  46.     attrSrc.removeAttribute(key);
    47. 
  
  47.     attrSrc.save(key);
    48. 
  
  48.     mark(key, 1);
    49. 
  
  49. };
    50. 
  
  50.  
    51. 
  
  51. // clear all attributes on <body> that using for textStorage 
    52. 
  
  52. // and clearing them from the 'data-userdata' attribute's value of <html>
    53. 
  
  53. localStorage.clear = function(){
    54. 
  
  54.  
    55. 
  
  55.     html.load(prefix);
    56. 
  
  56.  
    57. 
  
  57.     var attrs = html.getAttribute(prefix).split(','),
    58. 
  
  58.         len = attrs.length;
    59. 
  
  59.  
    60. 
  
  60.     for(var i=0;i<len;i++){
    61. 
  
  61.         attrSrc.removeAttribute(attrs[i]);
    62. 
  
  62.         attrSrc.save(attrs[i]);
    63. 
  
  63.     };
    64. 
  
  64.  
    65. 
  
  65.     html.setAttribute(prefix,'');
    66. 
  
  66.     html.save(prefix);
    67. 
  
  67.  
    68. 
  
  68. };
    69. 
  
  69.  
    70. 
  
  70. }();
    71.

7.可用的架構
(1)store.js
store.js是輕量的JS架構。
用 store.set(‘key’,'value’)和store.get(‘key’,'value’)基本滿足了需求。如果是以json形式儲存和解析 的話，要使用json.js來使IE支援json對象。除了原生的javascript還可以找到jQuery版本的store.js
(2)其他
USTORE.js https://github.com/hugeinc/USTORE.js
Box.js https://github.com/kbjr/Box.js

8.參考

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

至於localStorage就不說了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More