js-cookie是一个用于处理 cookie 的简单、轻量级 JavaScript API,官方文档:https://www.npmjs.com/package/js-cookie

一、安装

npm install js-cookie --save

二、引入

import Cookies from "js-cookie";

三、使用

1. 写入

// Create a cookie, valid across the entire site:
Cookies.set('name', 'value'); // Create a cookie that expires 7 days from now, valid across the entire site:
Cookies.set('name', 'value', { expires: 7 }); // Create an expiring cookie, valid to the path of the current page:
Cookies.set('name', 'value', { expires: 7, path: '' });

2. 取出

// Read cookie:
Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined // Read all visible cookies:
Cookies.get(); // => { name: 'value' }

3. 删除

// Delete cookie:
Cookies.remove('name'); // Delete a cookie valid to the path of the current page:
Cookies.set('name', 'value', { path: '' });
Cookies.remove('name'); // fail! 注:通过path/domain设置的cookie清除的时候也必须使用path/domain清除
Cookies.remove('name', { path: '' }); // removed!
Cookies.remove('name', { path: '', domain: '' }); // removed!

4. 命名空间

如果担心不小心修改掉Cookies中的数据,可以用noConflict方法定义一个新的cookie。

var Cookies2 = Cookies.noConflict();
Cookies2.set('name', 'value');

5. 特殊(在Cookie中存对象)

跟一般使用不同的是,从Cookie中取出的时候,要从字符串转换成json格式:

const user = {
name: 'lia',
age: 18
};
Cookies.set('user', user);
const liaUser = JSON.parse(Cookies.get('user'));

参考:https://www.cnblogs.com/gopark/p/13743364.html

vue中使用js-cookie插件的更多相关文章

  1. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  2. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  3. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  4. vue中的js引入图片,必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  5. vue中的js引入图片,使用require相关问题

    vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...

  6. vue中使用剪切板插件 clipboard.js

    vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...

  7. vue中eslintrc.js配置最详细介绍

    本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...

  8. vue中使用better-scroll滚动条插件

    应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...

  9. vue中创建js文件使用export抛出函数,import引入后不能绑定HTML的问题

    在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...

  10. 关于Vue中main.js,App.vue,index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

随机推荐

  1. hitTest练习

    业务逻辑1:         底部一个按钮, 按钮的上面有一个View,遮挡在按钮的上面.         点击View时, View接收事件,当发现点击的点在按钮的位置时, 让底部的按钮处理事件. ...

  2. JS特殊监听方法

    //监听元素变化classList //监听元素变化className //方法一 var tab2Interval = setInterval(function(){ if(!!($('#tab-2 ...

  3. VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂,适合新手

    1. 概述 首因效应告诉我们: 在日常交往中,第一印象是非常重要的,好的第一印象能让我们在与人相处时事半功倍. 但也从另一面告诉我们,不能仅凭第一印象去判断一个人,有时虚假的第一印象,也有可能蒙蔽我们 ...

  4. MySQL高性能学习笔记

    索引 何为索引?有什么作用? 索引是一种用于快速查询和检索数据的数据结构.常见的索引结构有: B 树, B+树和 Hash. 索引的作用就相当于目录的作用.打个比方: 我们在查字典的时候,如果没有目录 ...

  5. 《PHP程序员面试笔试宝典》——如何准备电话面试?

    本文摘自<PHP程序员面试笔试宝典>. PHP面试技巧分享,PHP面试题,PHP宝典尽在"琉忆编程库". 用人单位在收到简历之后,有时候由于求职者众多,而且很多求职者的 ...

  6. suse 12 二进制部署 Kubernetets 1.19.7 - 第00章 - 环境准备

    文章目录 0.环境准备 0.0.修改主机名 0.1.添加hosts解析 0.2.配置ssh免密 0.3.发送hosts解析文件到其他节点,并修改hostname 0.4.更新PATH变量 0.5.安装 ...

  7. Dubbo SPI机制之一JDK中的SPI

    首先简单阐述下什么是SPI:SPI 全称为 (Service Provider Interface) ,是JDK内置的一种服务提供发现机制.目前有不少框架用它来做服务的扩展发现,简单来说,就是一种动态 ...

  8. GAN实战笔记——第三章第一个GAN模型:生成手写数字

    第一个GAN模型-生成手写数字 一.GAN的基础:对抗训练 形式上,生成器和判别器由可微函数表示如神经网络,他们都有自己的代价函数.这两个网络是利用判别器的损失记性反向传播训练.判别器努力使真实样本输 ...

  9. java中的运算符介绍

    运算符&和&&的区别&运算符有两种用法:(1)按位与:(2)逻辑与. &&运算符是短路与运算.逻辑与跟短路与的差别是非常巨大的,虽然二者都要求运算符左右 ...

  10. Linux 时间操作及其同步

    完整格式支持链接:https://blog.imakiseki.cf/2022/02/27/techdev/linux-time-operations-and-sync/ 本文将以 Arch Linu ...