談HTML5本地儲存技術_html5教學技巧

本地快取是HTML5出現的新技術，這個技術的出現使得行動web的開發成為了可能。我們都知道，要打造一個高效能的行動應用，速度是關鍵。而在HTML5之前，只有cookie能夠儲存數據，大小只有4kb。這嚴重限制了應用程式檔案的存儲，導致web開發的行動應用程式需要較長的載入時間。有了本地存儲，讓web行動應用能夠更接近原生。

瀏覽器中，本地儲存透過window.localStorage呼叫。判斷瀏覽器是否支援本機儲存的程式碼如下：

XML/HTML Code複製內容到剪貼簿

1. if(window.localStorage){     
2.  alert('This browser supports localStorage');     
3. }else{     
4.  alert('This browser does NOT supportlocalStorage');     
5. }     

如果我們要將資料儲存到本地，最簡單的方法就是為window。 localStorage新增一個屬性並為其賦值。例如我們要儲存一個資料name，它的值為Tom，就可以用以下方式實現：

XML/HTML Code複製內容到剪貼簿

1. window.localStorage.name = 「Tom」     

這裡要注意字串變數需要引號。當我們想取出本地儲存中的資料市，可以利用getItem方法。整個程式碼流程如下：

JavaScript Code複製內容到剪貼簿

1. var storage = window.localStorage;     
2. storage.name = 「Tom」;     
3. //取出name資料     
4. var name1 = storage.getItem(“name”);     
5. alert(name1);     

這段程式碼在Chrome瀏覽器控制台中的顯示結果就是一個顯示Tom的提示框。可見我們已經透過這種方式正確的進行了資料的儲存與讀取。

如果我們想刪除這些儲存的數據，可以使用removeItem方法。在上述程式碼中加入以下程式碼：

JavaScript Code複製內容到剪貼簿

1. storage.removeItem(“name”);     

這時當我們再次alert的時候將顯示null，因為這個資料已經被清空了。

了解了一些基本的本地儲存用法和思想後，我們來系統的介紹一下本地儲存。

本地儲存分為三大類：localStorage/sessionStorage/本機資料庫

localStorage和sessionStorage二者的用法、所包含的函數、呼叫方法等都是相同的，二者只是意義不同。其中，localStorage所儲存的資料是長期有效的，而sessionStorage所儲存的資訊當每個會話（session）關閉時就會銷毀（通俗的說就是頁面關閉後資料自動銷毀）。

由於二者的特性不同，因此應用的場景也有很大差異。通常，當我們需要儲存一些使用者配置項目等一些需要長時間儲存的資料資訊時，就需要使用localStorgae進行保存，利用了其時效長的特性。對應的，當我們需要實作類似購物車等基於session的功能時，就需要使用sessionStorage。

由於localStorage和sessionStorage的用法相同，因此我們以localStorage為例，介紹二者的方法。

1、設定資料setItem
用法為localStorage.setItem(“key”, “value”)，表示將value值傳遞給key。 (sessionStorage.setItem使用方法同理，以下不再一一介紹)

2、取得資料getItem
用法為localStorage.getItem(“key”)，只要輸入對應的key值，就可以從中取出對應的value值。

3、刪除特定的資料removeItem
用法為localStorage.removeItem(key)，刪除key對應的資料。

4、清空所有資料clear
用法為localStorage.clear()，表示清空所有儲存系統中的資料。

以上就是一些最基本的sessionStorage/localStorage用法，希望對大家的學習有所幫助。