vue中使用js-cookie插件
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插件的更多相关文章
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- vue 中 直接操作 cookie 及 如何使用工具 js-cookie
转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...
- vue中使用js动画与velocity.js
一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...
- vue中的js引入图片,必须require进来
需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...
- vue中的js引入图片,使用require相关问题
vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...
- vue中使用剪切板插件 clipboard.js
vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...
- vue中eslintrc.js配置最详细介绍
本文是对vue项目中自带文件eslintrc.js的内容解析, 介绍了各个eslint配置项的作用,以及为什么这样设置. 比较详细,看完能对eslint有较为全面的了解,基本解除对该文件的疑惑. /* ...
- vue中使用better-scroll滚动条插件
应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...
- vue中创建js文件使用export抛出函数,import引入后不能绑定HTML的问题
在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...
随机推荐
- 有了Autolayout的UILabel
在没有Autolayout之前,UILabel的文字内容总是居中显示,导致顶部和底部会有一大片空缺区域 有Autolayout之后,UILabel的bounds默认会自动包住所有的文字内容,顶部和底部 ...
- Jmeter测试dubbo接口填坑
通过jmeter测试dubbo的方法网上有很多帖子,需要的自己度娘去就可以. 使用的时候有个问题需要提示一下,因为我碰到了,还耽误了一些时间,不说中间的过程.直接说处理方式: 问题是这样的: 将dub ...
- 《Effective Python》笔记——第4章 元类及属性
一.用属性取代get和set方法 常规的get和set方法如下: class OldResistor(): def __init__(self, ohms): self.__ohms = ohms d ...
- linux用户用户组与ACL
使用者ID:UID与GID 在使用Linux的过程中,经常会遇到各种用户ID(user identifier, UID)和组ID(group identifier, GID),Linux也是通过对这些 ...
- Solution -「Gym 102956A」Belarusian State University
\(\mathcal{Description}\) Link. 给定两个不超过 \(2^n-1\) 次的多项式 \(A,B\),对于第 \(i\in[0,n)\) 个二进制位,定义任意一个二元 ...
- 最新版的Dubbo Admin 3.0 本地启动方式
项目下载 项目地址:https://github.com/apache/dubbo-admin 如下图,使用git地址直接构建或者下载zip包构建源码都可以,我用的是下载的zip包, 项目架构说明 d ...
- 我们一起来学Shell - shell的条件判断
文章目录 Shell 条件测试语法 符号说明 Shell 测试表达式 文件测试表达式 字符串测试表达式 整数操作符 逻辑操作符 测试表达式的区别总结 Shell 条件判断之if语句 单分支 IF 条件 ...
- Wi-Fi DFS与TPC介绍
DFS与TPC是wifi认证的其中一项测试内容,如果不需要DFS功能,可以不进行测试,但是某些属于DFS频段的wifi信道则不允许使用. 1. 什么是WIFI Auto DFS? 通俗的说就是:躲雷达 ...
- 字符集编码(三):Unicode
前面<字符集编码(上):Unicode 之前>我们讲了在二十世纪九十年代 Unicode 出现之前各厂商和标准化组织为了应对不同语言文字的编码需求而设计了各种互不兼容的字符集编码标准,这使 ...
- 内网流量操控---pingtunnel建立icmp隧道
一.pingtunnel工作原理 在上面的实验环境中,我们将分别在攻击机kali 2020和webserver上部署pingtunnel工具,在量太主机之间实现icmp隧道,再在kali2020上监听 ...