js本地存储

js本地存储有cookie sessionStorage localStorage三种方式
参考文章：JS中的session和cookie区别
三种方式的区别：

1. cookie数据存放在客户的浏览器上，session数据放在服务器上
2. cookie无法保存太大的数据（最大4kb），本地保存的数据会发送给服务器，浪费带宽，并且安全性不高等
3. sessionStorage，localStorage 只能存储字符串，存储得容量较大（前者约5M，后者约20M）
4. sessionStorage生命周期为关闭浏览器窗口，只在同一窗口（页面）下数据可以共享
5. localStorage生命周期永久生效，除非手动删除 否则关闭页面也会存在，可以多窗口（页面）共享（同一浏览器可以共享）

cookie的使用参考这篇文章：js存储cookie
下面这段代码时sessionStorage与localStorage的使用

 <div>
      <p>sessionStorage</p>
      <button id="sessionBtnO">添加o</button>
      <button id="sessionBtnArr">添加arr</button>
      <button id="getSession">获取session</button>
      <button id="delSession">删除 arr</button>
      <button id="clearSession">删除所有session</button>
      <p>localStorage</p>
      <button id="localBtnO">添加o</button>
      <button id="localBtnArr">添加arr</button>
      <button id="getLocal">获取local</button>
      <button id="delLocal">删除某个 arr</button>
      <button id="clearLocal">删除所有Local</button>
    </div>

const o = {
        name: 'dj',
        age: 100
      }
      const arr = [1, 2, 3, 4, 5]
      document.getElementById('sessionBtnO').onclick = function () {
        sessionStorage.setItem('o', JSON.stringify(o))
      }
      document.getElementById('sessionBtnArr').onclick = function () {
        sessionStorage.setItem('arr', JSON.stringify(arr))
      }
      document.getElementById('getSession').onclick = function () {
        console.log(JSON.parse(sessionStorage.getItem('o')), JSON.parse(sessionStorage.getItem('arr')))
      }
      document.getElementById('delSession').onclick = function () {
        sessionStorage.removeItem('arr')
      }
      document.getElementById('clearSession').onclick = function () {
        sessionStorage.clear()
      }
 //  localStorage的方法同sessionStorage一样