vue 会话存储 与本地存储

795 阅读1分钟
数据存储常用到的方式分为 会话存储与本地存储 分别记录下两种方式的使用方式

会话存储 sessionStorage

// 1. 会话存储一般用于页面跳转是临时存储上一页面不便于路由传递的数据
 // 会话存储临时数据  会话存储的数据在浏览器关闭之后就会被清空
 sessionStorage.setItem('userInfo',JSON.stringify(res))

// 获取回话存储的临时数据
  const data = JSON.parse(sessionStorage.getItem('userInfo'))
  console.log('会话存储读取数据' + data)
  

本地存储 持久化存储 浏览器缓存不清空数据会一直在

  //在需要使用的地方读取
 // 本地存储数据 浏览器持久化存储 存储需要长期存在的数据 浏览器关闭数据不会被清空
    localStorage.setItem('user-info',JSON.stringify(res))
 //本地存储的数据读取
    const localsData = JSON.parse(localStorage.getItem('user-info'))
    console.log('本地存储数据读取' + localsData)   
  • 浏览器控制台的数据

截屏2022-06-02 上午11.23.51.png

  • 使用本地存储时要注意浏览器开放的存储空间是5M 如果要存储更大的数据量就需要考虑其它的存储方式了比如数据库

数据存储的方式还有很多 还有更多高级的用法 学习与进阶是一个长期的过程 有问题的地方还望资深的大佬不吝赐教