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

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

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

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

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

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

不過這兩個方法在實際應用中很少用到，我們一般都是直接采用直接訪問屬性的方法來讀取和設置。

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

為了方便理解，我簡單的寫一個關于localStorage的demo供大家參考

一個span顯示數(shù)字，一個按鈕，點擊按鈕使數(shù)字改變，并存儲到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");

當首次運行頁面時，通過開發(fā)工具可以看到localstorage中有一個counter被設置為了0。

當點擊時，不僅頁面中數(shù)字發(fā)生了變化，localStorage對象中的屬性也發(fā)生了變化。

這就是localStorage的簡單應用，其實在日常開發(fā)中還有很多應用，比如離線購物車。