超越cookie - 使用DOM sessionStorage和localStorage來保存更多信

JavaScript cookie可能不會成爲存檔和持久化信息的可靠方式，但它的小尺寸限制（對於大多數瀏覽器，每個域4kb）越來越成爲一個問題。當然，您只需在服務器上存儲大量信息，但這會給服務器帶來額外的請求，更重要的是，如果您希望Web應用程序在用戶離線時仍能正常運行，則會失敗。爲了更好地滿足當今網絡應用的需求， 5個被淘汰出了兩個新的方法來存儲在客戶端邊信息和 （統稱爲DOM存儲）。DOM Storage的主要特點是：sessionStoragelocalStorage

• 可以存儲比JavaScript cookie更多的信息。確切的數量因瀏覽器而異，但在FF3 +，Chrome4 +和Safari4 +中，每個存儲區域爲5MB，而在IE8 +中則爲10 MB。

• 以下瀏覽器支持DOM存儲（sessionStorage和 localStorage） - FF3.5 +，Chrome4 +，Safari4 +，Opera10.5 +和IE8 +。

• 對於sessionStorage這是我們用來存儲依舊只能通過瀏覽器會話的壽命數據對象，其不同之處在於數據不JavaScript的餅乾不 跨瀏覽器標籤仍然存在。然而，在某些瀏覽器中，數據確實在瀏覽器崩潰時存在，例如FF。

• 具體而言，使用DOM存儲存儲的數據 localStorage不會自動過期。

DOM存儲對象（sessionStorage和 localStorage）都繼承了同一組屬性和方法。他們是：

DOM存儲對象

方法	描述
的getItem（鑰匙）	返回基於DOM存儲區域內指定鍵的值。如果不存在相應的密鑰，null則返回。
setItem（鍵，值）	使用DOM存儲區域內的指定鍵存儲字符串值。如果此類密鑰已存在，則存儲在該位置的先前值將替換爲新值。
的removeItem（鑰匙）	根據DOM存儲區域內的指定鍵刪除值。
鍵（索引）	返回指定索引處內容項的鍵，其中index是基於零的整數，對應於DOM存儲區域中項的位置。請注意，添加或刪除項目時，每個項目的位置可能會更改。
明確（）	清除當前域的DOM存儲區域中的所有數據。
性能
長度	只讀屬性，返回DOM存儲區域中的項目數。

 window.sessionStorage對象

sessionStorage對象用於存儲應該僅持續瀏覽器會話持續時間的數據。重新加載或返回到同一瀏覽器會話中的頁面時，將保留該信息：

1 2 3 4 五 6 7 8 9 10

if (window.sessionStorage){     sessionStorage.setItem("mykey", "Some Value") //store data using setItem()     var persistedval=sessionStorage.getItem("mykey") //returns "Some Value"       sessionStorage.mykey2="Some Value 2" //store data using the dot notation     var persistedval2=sessionStorage.mykey2 //returns "Some Value 2"       sessionStorage["mykey3"]="Some Value 3" //store data using the square bracket notation     var persistedval3=sessionStorage["mykey3"] //returns "Some Value 3" }

如上所示，可以使用getItem()和設置和檢索值setItem()，或者通過直接引用鍵作爲對象的屬性來設置和檢索值 。

雖然sessionStorage行爲類似於JavaScript會話cookie，但它在以下關鍵方面有所不同：

• 分配給每個sessionStorage區域的存儲限制爲5MB（IE8中爲10 MB），而對於cookie，則爲4KB（IE8中爲10KB）。

• 使用的數據sessionStorage不會在瀏覽器選項卡中保留，即使兩個選項卡都包含來自同一域源的網頁也是如此。換句話說，內部數據sessionStorage不僅限於調用頁面的域和目錄，而且還包含頁面所在的瀏覽器選項卡。與會話cookie形成對比，會話cookie將數據從選項卡保留到選項卡。

• 在某些瀏覽器（如FF3.5 +）中，使用的數據 sessionStorage將在瀏覽器崩潰後繼續存在。這意味着如果瀏覽器因崩潰而關閉，sessionStorage 則重新啓動瀏覽器時仍會保留最近存儲的內部信息。

以下示例會自動將TEXTAREA的內容保存到sessionStorage用戶輸入的內容中，以便在瀏覽器刷新或崩潰時（目前僅限FF3.5 +）挽救內容。以下TEXTAREA的內容將在頁面的硬刷新後繼續存在，並且在支持瀏覽器的情況下，瀏覽器也會崩潰：

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16

<form> <textarea id="feedback" style="width:350px;height:200px"></textarea><br /> <input type="button" value="Click to Hard Reload Page" onClick="location.reload(true)" /> </form>   <script type="text/javascript"> if (window.sessionStorage){     var feedbackarea=document.getElementById("feedback")     if (sessionStorage.feedbackdata){ //if there is data stored for the target textarea         feedbackarea.value=sessionStorage.feedbackdata //recall it upon refresh or crash     }     feedbackarea.onkeyup=function(e){         sessionStorage.feedbackdata=this.value //save contents of textarea as user types     } } </script>

演示（FF3.5 +，Chrome4 +，Safari4 +，Opera10.5 +或IE8 +）：

 window.localStorage對象（以及FF3.0的window.globalStorage [location.hostname]）

該localStorage對象可以被認爲是持久化版本sessionStorage。而後者僅適用於瀏覽器選項卡會話期間持續，localStorage仍然存在任何無限期保存用戶的數據帕特和跨瀏覽器選項卡（類似於JavaScript的餅乾）。存儲大小與存儲大小相同。localStoragesessionStorage

在FF中，localStorage僅從FF3.5開始添加對對象的支持。在FF3.0瀏覽器中，存在不規範globalStorage[location.hostname]等價的對象，你可以使用最大化瀏覽器COM兼容性。考慮到這一點，下面顯示了一個簡單的計數器，顯示用戶在其歷史記錄中訪問當前頁面的次數：

1 2 3 4 五 6 7 8 9 10 11

<script type="text/javascript"> var mydomstorage=window.localStorage || (window.globalStorage? globalStorage[location.hostname] : null) if (mydomstorage){     var i=(mydomstorage.pagecount)? parseInt(mydomstorage.pagecount)+1 : 1     document.write("You have visited this page <b>" + i + " </b> times altogether.")     mydomstorage.pagecount=i } else{     document.write("<b>Your browser doesn't support DOM Storage unfortunately.</b>") } </script>

演示（需要FF3 +，Chrome4 +，Safari4 +，Opera10.5 +或IE8 +）： 您已經訪問過此頁面1次。

 使用DOM存儲創建可編輯的待辦事項列表

現在是時候稍微雄心勃勃了。讓我們利用DOM Storage提供的寬敞空間創建一個可編輯的記事本，用戶可以在其中輸入待辦事項列表，這些項目會自動保留在用戶的硬盤上，因此始終會保存所有更改。我們使用HTML 5的contenteditable屬性來使DIV的內容可編輯：

1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

<style type="text/css">   #todolist{     width:200px;     height: 200px;     font:normal 13px Arial;     background:lightyellow;     border:1px dashed gray;     overflow-y:scroll;     padding:5px; }   #todolist ol{     margin-left:-15px; }   #todolist li{     border-bottom:1px solid gray;     margin-bottom:8px; }     </style>   <body>   <div id="todolist" contenteditable="true"> <div contenteditable="false"><b>Edit To-Do List (auto saved):</b></div>     <ol>     <li>Take out garbage</li>     <li>Finish report</li>     <li>Set alarm to 6am</li>     </ol> </div> <a href="#" onClick="resetlist();return false">Reset To Do List</a>   <script type="text/javascript">   var default<span class="THmo acWHSet" txhidy15="acWHSet" data="html">html</span>='<div contenteditable="false"><b>Edit To-Do List (auto saved):</b></div>\n' //remember default contents of to-do list default<span class="THmo acWHSet" txhidy15="acWHSet" data="html">html</span>+='<ol>\n' default<span class="THmo acWHSet" txhidy15="acWHSet" data="html">html</span>+='<li>Take out garbage</li>\n' default<span class="THmo acWHSet" txhidy15="acWHSet" data="html">html</span>+='<li>Finish report</li>\n' default<span class="THmo acWHSet" txhidy15="acWHSet" data="html">html</span>+='<li>Set alarm to 6am</li>\n' default<span class="THmo acWHSet" txhidy15="acWHSet" data="html">html</span>+='</ol>'   function resetlist(){     todolistref.inner<span class="THmo acWHSet" txhidy15="acWHSet" data="html">HTML</span>=default<span class="THmo acWHSet" txhidy15="acWHSet" data="html">html</span>     domstorage.todolistdata=default<span class="THmo acWHSet" txhidy15="acWHSet" data="html">html</span> }   var todolistref=document.getElementById("todolist")   var domstorage=window.localStorage || (window.globalStorage? globalStorage[location.hostname] : null) if (domstorage){     if (domstorage.todolistdata){ //if there is data stored for the to-do list         todolistref.inner<span class="THmo acWHSet" txhidy15="acWHSet" data="html">HTML</span>=domstorage.todolistdata //recall it     }     todolistref.onkeyup=function(e){         domstorage.todolistdata=this.inner<span class="THmo acWHSet" txhidy15="acWHSet" data="html">HTML</span>     } }   </script>

演示（FF3.5 +，Chrome4 +，Safari4 +，Opera10.5 +或IE8 +）：

1. 拿出垃圾

2. 完成報告

3. 將鬧鐘設置爲早上6點

重置待辦事項列表

嘗試編輯或添加到列表中（在最後一個條目後按Enter鍵）。每次按下擊鍵時，內容都會自動保存到DOM存儲器中。