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的需求，尽量设置多的安全性参数。