HTML5的当地存储localStorage以及简朴运用

2019年8月31日 217次阅读 来源: 秦老爷子

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞