vue 存储数据的几种方式

Cookies 存储

Cookies 存储 介绍： 老技术、指定有效期、不能跨域（浏览器，网站，路径） cookie会跟随http协议发往后台，cookie最好处于服务器环境中使用 只能存文本、大小限制约4K、数量限制约50条

<template>

  <div class="c">我使用cookies存储读取
   我先存入'name:ly'<br>
   读取：{{ly}}
  </div>
</template>
<script setup lang="ts">
import {ref} from "@vue/runtime-core";
import Cookies from "js-cookie";
Cookies.set('name','ly')//存入数据
const  ly=ref(Cookies.get('name'))//读取数据
// Cookies.remove('name') 删除cookies
</script>

localStorage存储读取

只能永久，需要手动清除

  <div class="d">我是用localStorage存储读取(本地存储)
   读取：{{zjj}}
  </div>
 <script>
  window.localStorage.setItem('name','zjj')
     const  zjj=ref(window.localStorage.getItem('name'))
// 删除：window.localStorage.removeItem(name)
// 清空：window.localStorage.clear()
</script>

sessionStorage存储读取

只能会话级（关闭浏览器自动清除)

  <div class="e">sessionStorage存储读取（关闭浏览器清除）
  读取：{{lydzj}}</div>

window.sessionStorage.setItem('name','哈哈哈')
const  lydzj=ref(window.sessionStorage.getItem('name'))

// 删除：window.sessionStorage.removeItem(name)
// 清空：window.sessionStorage.clear()-

cookie数据保存在客户端，session数据保存在服务端。

session 简单的说，当你登陆一个网站的时候，如果web服务器端使用的是session，那么所有的数据都保存在服务器上，客户端每次请求服务器的时候会发送当前会话sessionid，服务器根据当前sessionid判断相应的用户数据标志，以确定用户是否登陆或具有某种权限。由于数据是存储在服务器上面，所以你不能伪造。

cookie sessionid是服务器和客户端连接时候随机分配的，如果浏览器使用的是cookie，那么所有数据都保存在浏览器端，比如你登陆以后，服务器设置了cookie用户名，那么当你再次请求服务器的时候，浏览器会将用户名一块发送给服务器，这些变量有一定的特殊标记。服务器会解释为cookie变量，所以只要不关闭浏览器，那么cookie变量一直是有效的，所以能够保证长时间不掉线。

如果你能够截获某个用户的cookie变量，然后伪造一个数据包发送过去，那么服务器还是 认为你是合法的。所以，使用cookie被攻击的可能性比较大。

如果cookie设置了有效值，那么cookie会保存到客户端的硬盘上，下次在访问网站的时候，浏览器先检查有没有cookie，如果有的话，读取cookie，然后发送给服务器。