摘要：是中作為在客戶端持久保存數(shù)據(jù)的方案，與相比，不用在客戶端與服務(wù)器之間相互傳遞，且可存儲(chǔ)大量數(shù)據(jù)，所以應(yīng)用范圍更廣泛。有兩個(gè)方法用于讀取和存儲(chǔ)數(shù)據(jù)，還有一個(gè)方法用于刪除數(shù)據(jù)。這就是的簡(jiǎn)單應(yīng)用，其實(shí)在日常開發(fā)中還有很多應(yīng)用，比如離線購(gòu)物車。

localStorage是HTML5中作為在客戶端持久保存數(shù)據(jù)的方案，與cookie相比，localStorage不用在客戶端與服務(wù)器之間相互傳遞，且可存儲(chǔ)大量數(shù)據(jù)（2.5MB-5MB），所以應(yīng)用范圍更廣泛。
由于許多老式瀏覽器不支持localStorage，所以要先寫個(gè)函數(shù)判斷瀏覽器是否支持該對(duì)象。

function supportLocalStorage() {
  if (typeof localStorage === "object") {
      return true;
  }
  return false;
}

如果運(yùn)行該函數(shù)，返回值為true，那么恭喜你，可以運(yùn)用本地存儲(chǔ)了。

localStorage有兩個(gè)方法用于讀取和存儲(chǔ)數(shù)據(jù)，還有一個(gè)方法用于刪除數(shù)據(jù)。

localStorage.setItem("name", "Shane");  // 存儲(chǔ)數(shù)據(jù)
localStorage.getItem("name");  // 讀取數(shù)據(jù)，返回Shane
localStorage.clear();  // 清空當(dāng)前域下的所有l(wèi)ocalStorage

不過(guò)這兩個(gè)方法在實(shí)際應(yīng)用中很少用到，我們一般都是直接采用直接訪問(wèn)屬性的方法來(lái)讀取和設(shè)置。

localStorage.name = "Shane";  // 存儲(chǔ)數(shù)據(jù)
localStorage.name  // 讀取數(shù)據(jù)，返回Shane

為了方便理解，我簡(jiǎn)單的寫一個(gè)關(guān)于localStorage的demo供大家參考

一個(gè)span顯示數(shù)字，一個(gè)按鈕，點(diǎn)擊按鈕使數(shù)字改變，并存儲(chǔ)到localstorage中。

  
  click me!

function Demo(id) {
  this.counter = 0;
  this.mainEl = document.querySelector(id);
  this.numEl = this.mainEl.querySelector("#num"); 
  this.btnEl = this.mainEl.querySelector("#btn"); 
  this.btnEl.addEventListener("click", this.changeCounter.bind(this));  // bind限定作用域
  this.init();
}
Demo.prototype.init = function () {
  /* 若localStorage中counter不存在則為0，存在則讀取 */
  if (localStorage.__counter__ != null) {
    this.counter = localStorage.__counter__;
  } else {
    localStorage.__counter__ = this.counter;
  }
  this.numEl.innerHTML = this.counter;    
}
Demo.prototype.changeCounter = function () {
  this.counter++;
  localStorage.__counter__ = this.counter;
  this.numEl.innerHTML = this.counter;    
}
var demo = new Demo("#demo");

當(dāng)首次運(yùn)行頁(yè)面時(shí)，通過(guò)開發(fā)工具可以看到localstorage中有一個(gè)counter被設(shè)置為了0。

當(dāng)點(diǎn)擊時(shí)，不僅頁(yè)面中數(shù)字發(fā)生了變化，localStorage對(duì)象中的屬性也發(fā)生了變化。

這就是localStorage的簡(jiǎn)單應(yīng)用，其實(shí)在日常開發(fā)中還有很多應(yīng)用，比如離線購(gòu)物車。