阅读数:127 评论数:0

一、简介

js-cookie和vue-cookies都是vue中的插件，可用来操作cookie，当然也可以用原生来获取cookie。

二、使用js-cookie

根据官网描述其优点有：适用所有浏览器、接受任何字符、经过任何测试没什么bug、支持CMD和CommonJS、压缩之后非常小，仅900个字节。

1、安装

 npm install js-cookie 'js-cookie' --save

2、全局引入

import Cookies from 'js-cookie'

3、在项目中使用

//1、存cookie  set方法支持的属性有 ：  expires->过期时间    path->设置为指定页面创建cookie   domain-》设置对指定域名及指定域名的子域名可见  secure->值有false和true ,表示设置是否只支持https,默认是false
Cookies.set('key', 'value');  //创建简单的cookie
Cookies.set('key', 'value', { expires: 27 });//创建有效期为27天的cookie
Cookies.set('key', 'value', { expires: 17, path: ''  }); //可以通过配置path,为当前页创建有效期7天的cookie

//2、取cookie
Cookies.get('key'); // 获取指定key 对应的value
Cookies.get(); //获取所有value

//3、删除cookie
Cookies.remove('key');//删除普通的cookie
Cookies.remove('name', { path: '' }); // 删除存了指定页面path的cookie


注意：如果存的是对象，如： userInfo = {age:111,score:90};  Cookie.set('userInfo',userInfo)

取出来的userInfo需要进行JSON的解析,解析为对象：let res = JSON.parse( Cookie.get('userInfo') );

当然你也可以使用：Cookie.getJSON('userInfo');

三、使用vue3-cookies

1、安装

npm install vue3-cookies --save

#OR

yarn add vue3-cookies

2、引入

（1）全局引入

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'

import $axios from "./utils/axios";

// 引入VueCookies
import VueCookies from 'vue3-cookies'

const app = createApp(App)
// use一下VueCookies
app.use(VueCookies)

// 添加到vue对象上，可以在全局通过 this.$axios来调用
app.config.globalProperties.$axios = $axios;
app.mount('#app')  // 挂在放最后

<script setup>
  // 因为在main.js中我们执行了app.use(VueCookies)，那么vue内部就会为vue对象绑定上cookie
  // 所以我们可以通过proxy.$cookies来操作cookie了
  // proxy相当于vue2中的this
  import {getCurrentInstance} from 'vue'
  const {proxy} = getCurrentInstance()
  // 设置cookie
  proxy.$cookies.set('k1', 'v1', '1h')
  // 获取
  console.log(proxy.$cookies.get('k1')) // v1
</script>
<template>
  <div></div>
</template>
<style scoped>
</style>

（2）局部引入

import axios from 'axios'

// 引入cookie
import { useCookies } from "vue3-cookies";
const { cookies } = useCookies();


// 设置cookie
cookies.set('k3', 'v3', '1h')
// 获取
console.log(cookies.get('k3')) // v3

// $开头以示区分，你随便命名都行，
const $axios = axios.create({
    baseURL: "http://httpbin.org",
    timeout: 2000
})

export default $axios

3、常用方法

<script setup>
    // 引入方式2
    import {useCookies} from "vue3-cookies";
    const {cookies} = useCookies();

    // 设置cookie
    cookies.set('k2', 'v2', '1h')
    // 获取
    console.log(cookies.get('k2')) // v2
    // 删除指定key
    cookies.remove("k2")

    // 判断某个key是否存在，返回true或者false

    console.log(cookies.isKey("k2"))
    // 获取所有的key的数组
    console.log(cookies.keys())  // ['_ga', 'csrftoken', 'k1', 'k3', 'k4', 'k5']
    //就能按照索引取值
    console.log(cookies.keys()[0])  // _ga

    // 想要获取值，需要自己处理，这里没有提供方法
    let obj = {};
    for (let key of cookies.keys()){
        obj[key] = cookies.get(key)
    }
    console.log(obj)
</script>
<template>
    <div></div>
</template>
<style scoped>
</style>