Web本地存储

本地存储包括：localStorage与SessionStorage 通过本地存储，web 应用程序能够在用户浏览器中对数据进行本地的存储。

LocalStrage:

本地存储用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除

优势： 1、localStorage拓展了cookie的4K限制 2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

局限： 1、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换 2、localStorage在浏览器的隐私模式下面是不可读取的 3、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡 4、localStorage不能被爬虫抓取到

SessionStorage：

会话存储用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据

优点： sessionStorage能够大量的保存浏览器当中的数据，在不同的窗口之下的sessionStorage存储相互独立，互不干扰。

API：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebStorage</title>
</head>
<body>
<button onclick="add()">添加数据</button>
<br>
<button onclick="look()">查看数据</button>
<br>
<button onclick="remove()">删除数据</button>
<br>
<button onclick="clearData()">清空数据</button>
</body>
</html>
<script>
    let k={name:'曼巴',score:'60',date:'413'}
  function add() {
localStorage.setItem('first','sss')
      localStorage.setItem('thecond','6666')
// console.log('ssss')
//       console.log(66)
      localStorage.setItem('third',JSON.stringify(k))
      const b=JSON.stringify(k)
      console.log(JSON.parse(b).name)
      console.log(JSON.parse(b).score)
      console.log(JSON.parse(b).date)
  }
  function look() {
     console.log(localStorage.getItem('first'))
  }
  function remove() {
      localStorage.removeItem('first')
  }
  function clearData() {
      localStorage.clear()
  }
</script>