13. Nuxt3中Cookie的设置

在网页制作时，经常需要临时保存一些信息到 Cookie 中，而不是全部都保存到数据库中，这样作能减轻服务器的压力。这节就学习一下 Nuxt3 中的 Cookie 操作。

cookie 的作用

先来了解一下 Cookie 的作用，Cookie 最常见的开发作用就是临时记录用户个人信息，比如我们登录了一个网站，然后提醒下次记住信息，下次再浏览这个网站时，就不用登录了。

这就是 cookie 起的作用，当我们登录一次后，把登录信息记录在了 cookie 里，但是这个记录是有时效性的，通过属性可以进行设置。比如你连续 7 天没登录，那 cookie 就过期了，再浏览这个网站就需要重新登录了。

useCookie()方法的使用

const cookie = useCookie(name, options)

制作登录太复杂，我们这属于是入门的教程，所以就用 Cookie 制作一个计数器，让你了解 Cookie 的使用方法。这里要使用的函数就是useCookie ，代码如下。

在 pages 文件夹下，新建一个页面 demo3.vue。

<template>
  <h1>Counter:{{ counter }}</h1>
  <button @click="reset">Reset</button>
  <button @click="add">Add</button>
</template>

<script setup>
const counter = useCookie("counter");
counter.value = counter.value || 0;
const reset = () => {
  counter.value = 0;
};
const add = () => {
  counter.value = counter.value + 1;
};
</script>

<style scoped></style>

这段代码的意思，我创建了一个叫做 counter 的 Cookie 值，然后取得 Cookie 值，放到页面上，如果没有 Cookie 值的时候，就初始化 Counter 的 Cookie 值为 0。然后我又作了两个按钮，一个是直接将 Cookie 值设置为 0，一个是每点击一次 Cookie 加 1。
代码编写完成后，可以到浏览器中查看一下效果，你也可以按 F12 打开浏览器的调试模式，找到Application 标签，再找到Cookie 选项，就可以看到里边的 Cookie 值了，这也很好的证明我们的 Cookie 值设置成功了。

常用的相关属性

useCookie()函数，第一个参数是设置 Cookie 值的名字，第二个参数为选项option,我们接着来看有那些可选择配置的 Cookie 参数。（注意：我这里只说两个常用的）

1. maxAge/expires

这两个参数都是设置 Cookie 的有效时长的，如果两个参数你都不设置，那 Cookie 的值在关闭浏览器的时候将会被清空。两个参数的不同是，maxAge的值是一个数字Number,而 expires 的值是一个日期对象Date object。

比如我们希望设置 Cookie 的过气时间是一个小时，也就是 3600 秒，那我们的配置就需要这样写。

2. httpOnly

这算是一个安全设置，如果把httpOnly设置为true，可以对最常见的 XSS 攻击起到防范作用。

什么是 HttpOnly？ HttpOnly 是包含在 http 返回头Set-Cookiew里面的一个附件的 flag，所以它是后端服务器对 cookie 设置的一个附件属性，在生成 cookie 时使用 HttpOnly 标志有助于减轻客户端脚本访问收保护 cookie 的风险。

const counter = useCookie("counter",{
  htttpOnly:true,
});

3. secure

这也是一个安全设置，如果你的网址不是HTTPS的，并且把secure的值设置为 true，那 Cookie 的值就不会传递给服务端。总的来说还是一个为了服务器安全的设置。

const counter = useCookie("counter",{
  secure:true,
});

这个需要配置 HTTPS 所以不太好演示，这里也就不演示了。

其余的还有domain 、path 、sameSite 、encode、decode 这些属性设置，其实都跟安全有关，因为 Cookie 的设置确实需要考虑安全性，所以根据服务端和 app 的需求，尽量设置多的安全性参数。

以上关于13. Nuxt3中Cookie的设置的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。