为什么捐赠
API 资源管理器
Cookie

这是对标准化 document.cookie 的封装。

注意

除了处理 Cookie 的标准方法外,使用 Cookie 插件,您可以使用 JSON 对象读取和写入 Cookie。它还可以管理来自 SSR 的 Cookie。

加载 Cookie API...

提示

对于 Electron 版本 >= v1.12.2,Cookie 插件在 Electron 环境中不起作用。您可能需要查看 Electron Cookie 文档。

安装

// quasar.config file

return {
  framework: {
    plugins: [
      'Cookies'
    ]
  }
}

关于 SSR 的说明

在构建用于 SSR 时,仅使用 $q.cookies 形式。或者,在服务器端,这是另一个使用它的示例

import { Cookies } from 'quasar'

// you need access to `ssrContext`
function (ssrContext) {
  const cookies = process.env.SERVER
    ? Cookies.parseSSR(ssrContext)
    : Cookies // otherwise we're on client

  // "cookies" is equivalent to the global import as in non-SSR builds
}

ssrContext@quasar/app-vite 启动文件@quasar/app-webpack 启动文件 中可用。以及在 @quasar/app-vite 预取@quasar/app-webpack 预取 功能中,它作为参数提供。

这样做的原因是在客户端应用程序中,每个用户都将在其浏览器中使用应用程序的新实例。对于服务器端渲染,我们希望相同:每个请求都应该有一个新的、隔离的应用程序实例,以便没有跨请求状态污染。因此,Cookie 需要分别绑定到每个请求。

在 Vue 文件外部

import { Cookies } from 'quasar'
const value = Cookies.get('cookie_name')

当 Cookie 未设置时,返回值为 null

在 Vue 文件内部

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  const value = $q.cookies.get('cookie_name')
}

读取所有 Cookie

在 Vue 文件外部

import { Cookies } from 'quasar'
const cookies = Cookies.getAll()

cookies 变量将是一个包含键值对的对象(cookie_name : cookie_value)。

在 Vue 文件内部

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  const allCookies = $q.cookies.getAll()
}
在 Vue 文件外部

import { Cookies } from 'quasar'
Cookies.has('cookie_name') // Boolean
在 Vue 文件内部

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  const hasIt = $q.cookies.has('cookie_name')
}
在 Vue 文件外部

import { Cookies } from 'quasar'

Cookies.set('cookie_name', cookie_value)

// or pass in options also:
Cookies.set('cookie_name', cookie_value, options)
在 Vue 文件外部

import { Cookies } from 'quasar'

Cookies.set('quasar', 'framework', {
  secure: true
})
在 Vue 文件内部

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.cookies.set('cookie_name', cookie_value)
  // or pass in options also:
  $q.cookies.set('cookie_name', cookie_value, options)
}

(可选) 的 options 参数是一个对象,下面将逐个属性进行解释。

选项:expires

expires: 10 // in 10 days
expires: -1 // yesterday
expires: 'Mon, 06 Jan 2020 12:52:55 GMT'
expires: new Date() // some JS Date Object
expires: '1d 3h 5m' // in 1 day, 3 hours, 5 minutes
expires: '2d' // in 2 days
expires: '15m 10s' // in 15 minutes, 10 seconds

定义 Cookie 的生命周期。值可以是数字,将被解释为从创建时间的日期数,也可以是 Date 对象或原始字符串化的日期(“Mon, 06 Jan 2020 12:52:55 GMT”)或特殊的字符串格式(“1d”,“15m”,“13d”,“1d 15m”,“1d 3h 5m 3s”)。如果省略,则 Cookie 成为会话 Cookie。

选项:path

path: '/'

定义 Cookie 有效的路径。默认情况下,Cookie 的路径是创建 Cookie 的页面的路径(标准浏览器行为)。如果您想使其例如在整个域中可用,请使用 path: ‘/’。默认值:创建 Cookie 的页面的路径。

选项:domain

domain: 'quasar.dev'

定义 Cookie 有效的域。默认值:创建 Cookie 的页面的域。

选项:sameSite

sameSite: 'Strict'
// or
sameSite: 'Lax'

SameSite Cookie 允许服务器要求 Cookie 不应与跨站点(其中站点由可注册域定义)请求一起发送,这提供了一些针对跨站点请求伪造攻击 (CSRF) 的保护。

**严格** - 如果 SameSite Cookie 具有此属性,则浏览器仅在请求源自设置 Cookie 的网站时才发送 Cookie。如果请求源自与当前位置的 URL 不同的 URL,则不会包含任何标记有严格属性的 Cookie。

**宽松** - 如果属性设置为 Lax,则在跨站点子请求(例如加载图像或框架的调用)上会保留 SameSite Cookie,但在用户从外部站点导航到 URL 时(例如,通过遵循链接)将发送这些 Cookie。

有关 same-site 设置的更多信息,请访问 此处

选项:httpOnly

httpOnly: true

为了帮助减轻跨站点脚本 (XSS) 攻击,HttpOnly Cookie 无法访问 JavaScript 的 Document.cookie API;它们仅发送到服务器。例如,保留服务器端会话的 Cookie 不需要对 JavaScript 可用,并且应设置 HttpOnly 标志。

选项:secure

secure: true

如果为真,则 Cookie 传输需要安全协议 (HTTPS) 并且不会通过 HTTP 发送。默认值为 false

提示

如果使用 Quasar CLI 并且处于开发模式,则可以通过 quasar.config 文件 > devServer > https: true 启用 HTTPS。

选项:other

other: 'SomeNewProp'

其他 Cookie 选项的原始字符串。用作对可能尚未在 Quasar 中实现的较新属性的最后手段。

在 Vue 文件外部

import { Cookies } from 'quasar'

Cookies.remove('cookie_name')

// if cookie was set with specific options like path and/or domain
// then you need to also supply them when removing:
Cookies.remove('cookie_name', options)
在 Vue 文件内部

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.cookies.remove('cookie_name')

  // if cookie was set with specific options like path and/or domain
  // then you need to also supply them when removing:
  $q.cookies.remove('cookie_name', options)
}

警告

如果先前使用特定的 path 和/或 domain 设置了 Cookie,则只有在通过 options 参数将相同的属性传递到 remove() 时才能成功删除它。这符合 RFC6265。