Tit1e

说到前端的本地存储，一般人都会想到 localStorage、sessionStorage 和 Cookie。但这里我暂且不谈 cookie，来说说这两个长得比较像的。

localStorage 是 HTML5 的新特性，用于数据的存储，但是不同于 sessionStorage，它的存储期限可以是无期限，只要用户不手动去清除它。而 sessionStorage 则在页面被关闭时就会被清除。它们可以存储的大小都为 5M。而 Cookie 则如它的名字，存储空间也只有小小的 4kb。

我们先来看下 localStroage 是个什么东西，在 chrome 的控制台直接打印，我门可以看到这些东西：

我们可以直观地看到 localStroage 是一个对象，并且在有一个 length 属性，先猜测它是用来表示键值对数量的，并且我们可以看到 localStroage 的一些 API ：

// 最常用的为上面三个
localStorage.setItem() //设置 localStorage
localStorage.getItem() //读取 localStorage
localStorage.removeItem() //移除 localStorage

localStorage.clear() //清空 localStorage
localStorage.key() //获取某个位置的键名

不过需要注意的是，localStorage 不能直接存储对象，需要先将对象转成 json 才能存储。否则你将看到这样的结果：

接下来我们来实际操作一下：

  <div>
    <h4>设置</h4>
    <label>
      键：<input type="text" id="key">
    </label>
    <label>
      值：<input type="text" id="input">
    </label>
    <button type="button" onclick="setValue()">写入</button>
  </div>
  <div>
    <h4>读取</h4>
    <label>
      键：<input type="text" id="getKey">
    </label>
    <button type="button" onclick="getValue()">读取</button>
    <p>
      读取内容：<span id="value"></span>
    </p>
  </div>
  <div>
    <h4>清除</h4>
    <label>
      键：<input type="text" id="removeKey">
    </label>
    <button type="button" onclick="removeValue()">清除</button>
  </div>

  // 设置
  function setValue(){
    var key = document.getElementById('key').value
    var value = document.getElementById('input').value
    localStorage.setItem(key,value)
  }
  // 获取
  function getValue(){
    var getKey = document.getElementById('getKey').value
    var value = localStorage.getItem(getKey)
    document.getElementById('value').innerText = value
  }
  // 移除
  function removeValue(){
    var removeKey = document.getElementById('removeKey').value
    localStorage.removeItem(removeKey)
  }

上面的代码渲染出来的界面应该这这样的：

然后，在对应输入框中输入内容就可以进行操作了。
至于存储的内容，我们可以在控制台的 Application 中看到：

值得注意的是，如果键名相同，之前的键值会被覆盖。并且，因为这些存储的内容可以在控制台被浏览和修改，所以这里并不推荐用来存一些比较私密的信息，避免信息的泄露。

浅谈 localStorage 和 sessionStorage