13. Nuxt3中Cookie的设置

目录
文章目录隐藏
  1. cookie 的作用
  2. useCookie()方法的使用
  3. 常用的相关属性

在网页制作时,经常需要临时保存一些信息到 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 所以不太好演示,这里也就不演示了。

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 13. Nuxt3中Cookie的设置

发表回复