在网页制作时，经常需要临时保存一些信息到 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 的需求，尽量设置多的安全性参数。