DIV CSS 佈局教程網

本地緩存是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用法，希望對大家的學習有所幫助。