HTML5的本地存储localStorage以及简单应用

摘要：是中作为在客户端持久保存数据的方案，与相比，不用在客户端与服务器之间相互传递，且可存储大量数据，所以应用范围更广泛。有两个方法用于读取和存储数据，还有一个方法用于删除数据。这就是的简单应用，其实在日常开发中还有很多应用，比如离线购物车。

localStorage是HTML5中作为在客户端持久保存数据的方案，与cookie相比，localStorage不用在客户端与服务器之间相互传递，且可存储大量数据（2.5MB-5MB），所以应用范围更广泛。
由于许多老式浏览器不支持localStorage，所以要先写个函数判断浏览器是否支持该对象。

</>复制代码 
function supportLocalStorage() {
  if (typeof localStorage === "object") {
      return true;
  }
  return false;
}

如果运行该函数，返回值为true，那么恭喜你，可以运用本地存储了。

localStorage有两个方法用于读取和存储数据，还有一个方法用于删除数据。

</>复制代码 
localStorage.setItem("name", "Shane");  // 存储数据
localStorage.getItem("name");  // 读取数据，返回Shane
localStorage.clear();  // 清空当前域下的所有localStorage

不过这两个方法在实际应用中很少用到，我们一般都是直接采用直接访问属性的方法来读取和设置。

</>复制代码 
localStorage.name = "Shane";  // 存储数据
localStorage.name  // 读取数据，返回Shane

为了方便理解，我简单的写一个关于localStorage的demo供大家参考

一个span显示数字，一个按钮，点击按钮使数字改变，并存储到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");

当首次运行页面时，通过开发工具可以看到localstorage中有一个counter被设置为了0。

当点击时，不仅页面中数字发生了变化，localStorage对象中的属性也发生了变化。

这就是localStorage的简单应用，其实在日常开发中还有很多应用，比如离线购物车。