本地緩存是HTML5出現的新技術，這個技術的出現使得移動web的開發成為了可能。我們都知道。要想打造一個高性能的移動應用，速度是關鍵。而在HTML5之前。僅僅有cookie可以存儲數據，大小僅僅有4kb。這嚴重限制了應用文件的存儲，導致web開發的移動應用程序須要較長的載入時間。有了本地存儲，讓web移動應用可以更接近原生。

瀏覽器中，本地存儲通過window.localStorage調用。推斷瀏覽器是否支持本地存儲的代碼例如以下：

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT supportlocalStorage');
}

假設我們要將數據存儲到本地。最簡單的方法就是為window。

localStorage加入一個屬性並為其賦值。

比如我們要存儲一個數據name。它的值為Tom，就能夠通過例如以下方式實現：

window.localStorage.name = “Tom”

這裏要註意字符串變量須要引號。當我們想取出本地存儲中的數據市。能夠利用getItem方法。整個代碼流程例如以下：

var storage = window.localStorage;
storage.name = “Tom”;
//取出name數據
var name1 = storage.getItem(“name”);
alert(name1);

這段代碼在Chrome瀏覽器控制臺中的顯示結果就是一個顯示Tom的提示框。可見我們已經通過這樣的方式正確的進行了數據的存儲與讀取。

假設我們想刪除這些存儲的數據。能夠使用removeItem方法。在以上代碼中增加例如以下代碼：

storage.removeItem(“name”);

這時當我們再次alert的時候將顯示null。由於這個數據已經被清空了。

HTML5移動開發實戰必備知識——本地存儲(1)