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

2019年9月14日 152次阅读 来源: 秦老爷子

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中。

<p id="demo">
  <span id="num"></span>
  <button id="btn">click me!</button>
</p>

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

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。

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

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

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

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

    原文作者：秦老爷子
    原文地址: https://segmentfault.com/a/1190000008428215
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞