【Vue】15 浏览器本地存储 localStorage 和 sessionStorage

WebStorage（js 本地存储）

  

例子：

当你没有登录，打开唯品会搜索鞋子，然后关闭掉浏览器，然后再打开发现搜索框下面有之前搜索的内容。

​

其实借助了浏览器本地存储到了你的硬盘上

修改了这下面浏览器存储的值，页面上的也发生了变化，就是往你本地缓存点东西。

​

自己代码实现保存数据

前提这边的 key 和 value 一定要为字符串，如果不是字符串也会自动帮你转化成字符串

用 localStorage.setItem('存入的key', '对应的值')

<h2>localStorage</h2>
<button onclick="saveDate()">点我保存数据</button><br/>
<button onclick="readDate()">点我读数据</button><br/>
<button onclick="deleteDate()">点我删除数据</button><br/>
<button onclick="deleteAllDate()">点我清空数据</button><br/>

<script>
  let person = {name:"JOJO",age:20}

  function saveDate(){
    localStorage.setItem('msg','hello')
    localStorage.setItem('person',JSON.stringify(person))
  }
  function readDate(){
    console.log(localStorage.getItem('msg'))
    const person = localStorage.getItem('person')
    console.log(JSON.parse(person))
  }
  function deleteDate(){
    localStorage.removeItem('msg')
    localStorage.removeItem('person')
  }
  function deleteAllDate(){
    localStorage.clear()
  }
</script>

 

​

​

如果传入的是一个对象类型的话

​

发现这就是对象的 tostring 的结果也就是说, 这个数据废了, 之后读出来的也不是数据的结果​

因为就像, 前面说的只要不是字符串类型它都会给你调用 tosting, 而对象类型千万不要调 tostring 因为会把数据破坏掉

所以我们用 JSON.stringify() 来实现 把对象转为字符串。

​

​

实现读取数据

localStorage.getItem('放入存入字符串名')

由于对象存储时用 JSON.stringify() 把它转化成了字符串的形式, 所以这边要把它用 JSON.parse() 解析出来变成对象类型

​

​

清除对应  localStorage.removeItem('')

和清空       localStorage.clear()

​

当读取一个没有储存的 key 时

当数据没有在缓存中被读取时为 null

​

​

然后 这边设置读一个没有的储存, 发现 JSON.parse(null) 的结果还是 null

​

​

localStorage 的最大特点就是你关闭掉浏览器, 里面的东西不会消失

sessionStorage 的 session为会话的意思, 也就是浏览器关闭的意思, 就是当浏览器关闭, 存入的数据会消失

里面用到的 api 与 localStorage 一模一样

只需要把前面的 localStorage 换成 sessionStorage

​

​

重新关闭浏览器, 再次打开

sessionStorage 发现没了

​

之前 localStorage 里面的东西还存在, 那怎么会消失, 可能切回来切回去就消失了. 或者清除了网站设置, 或则 cookie 或则其他网站数据

​

​

总结：

​