【Vue3】js-cookie包

文章目录

  • 特性介绍
  • 一、安装
  • 二、使用步骤
    • 1.引入库
    • 2.基础用法(设置读取删除)


特性介绍

js-cookie 是一个上手简单,轻量的,处理cookies的库
有如下特点:

  1. 在所有浏览器是可用
  2. 允许所有的字符集
  3. 支持 ES6 模块化, AMD 和 CommonJs 模块化
  4. 符合 RFC 6265
  5. 有wiki
  6. 允许自定义编码、解码
  7. 小体积,小于 800 bytes

一、安装

npm i js-cookie

二、使用步骤

1.引入库

import Cookies from "js-cookie"

2.基础用法(设置读取删除)

创建一个 cookie,在整个站点中有效:

Cookies.set('name', 'value')

创建一个cookie,有效期为7天,在整个站点上有效:

Cookies.set('name', 'value', { expires: 7 })

js-cookie 的expires 属性是支持一个Data实例对象的。

假设cookie是要在15分钟之后过期

var inFifteenMinutes = new Date(new Date().getTime() + 15 * 60 * 1000);
Cookies.set('foo', 'bar', {    expires: inFifteenMinutes});

你也可以设置cookie的有效时间只有半天

var inHalfADay = 0.5;
Cookies.set('foo', 'bar', {expires: inHalfADay});

或者是 半个小时(30分钟)

var in30Minutes = 1/48;
Cookies.set('foo', 'bar', {expires: in30Minutes});

创建一个指定有效期的cookie,且对当前页面的路径有效:

Cookies.set('name', 'value', { expires: 7, path: '' })

读取cookie:

Cookies.get('name') // => 'value'Cookies.get('nothing') // => undefined

读取所有cookie:

Cookies.get() // => { name: 'value' }

注意;无法通过传递 cookie 属性之一(在设置相关 cookie 时可能已使用或未使用的述下)来读取特定 cookie

Cookies.get('foo', { domain: 'sub.example.com' }) // `domain` won't have any effect...!

值为 foo 的 cookie 只能通过 .get() 来读取,前提是这个cookie是允许你的代码读取的,通过指定 域和/或路径属性 来读取cookie是不会生效的

删除cookie:

Cookies.remove('name')

删除一个对当前页面路径有效的cookie:

Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!, 需要指定 path字段,如下行代码
Cookies.remove('name', { path: '' }) // removed!

重要! 当删除 cookie 并且这个cookie你有指定一些属性时,您必须传递用于设置 cookie 的完全相同的路径和域属性

Cookies.remove('name', { path: '', domain: '.yourdomain.com' })


你可能感兴趣的:(前端,javascript,前端,vue.js)