vue之vue-cookies安装和使用说明
npm官方链接:https://www.npmjs.com/package/vue-cookies

安装,在对应项目根目录下执行:
npm install vue-cookies --save
或者
cnpm install --save vue-cookies

使用:
import Vue from 'Vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
Api:
设置 cookie:
this.$cookies.config('30d')
// set path,注意:这里的value不能用true,false,要用字符串才行
this.$cookies.set("use_path_argument","value","1d","/app");

this.$cookies.set(keyName, value) //return this

获取cookie
this.$cookies.get(keyName) // return value

删除 cookie
this.$cookies.remove(keyName) // return false or true , warning: next version return this; use isKey(keyname) return true/false,please

查看一个cookie是否存在(通过keyName)
this.$cookies.isKey(keyName) // return false or true

获取所有cookie名称
this.$cookies.keys() // return a array

vuejs技术交流QQ群:458915921 有兴趣的可以加入

====================
第一步:安装vue-cookies
npm install vue-cookies --save

第二步:引入和通过 Vue.use() 明确地安装
// require
var Vue = require('vue')
Vue.use(require('vue-cookies'))

// es2015 module
import Vue from 'Vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

设置一个cookie
this.$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]]) //return this

获取一个cookie
this.$cookies.get(keyName) // return value

删除一个cookie
this.$cookies.remove(keyName [, path [, domain]]) // return false or true , warning: next version return this; use isKey(keyname) return true/false,please

存在a cookie name?
this.$cookies.isKey(keyName) // return false or true

得到所有 cookie name
this.$cookies.keys() // return a array

警告
$ cookies关键名称不能设置为['expires','max-age','path','domain','secure']

====================
vue 自己写cookie并使用
建一个js文件:
export function addCookie(objName, objValue, objHours){//添加cookie
var str = objName + "=" + escape(objValue);
//为0时不设定过期时间,浏览器关闭时cookie自动消失
if (objHours > 0) {
var date = new Date();
var ms = objHours * 3600 * 1000;
date.setTime(date.getTime() + ms);
str += "; expires=" + date.toGMTString();
}
document.cookie = str;
//alert("添加cookie成功");
}

//获取指定名称的cookie的值
export function getCookie(objName){
var arrStr = document.cookie.split("; ");
for (var i = 0; i < arrStr.length; i++) {
var temp = arrStr[i].split("=");
if (temp[0] == objName)
return unescape(temp[1]);
}
}

//为了删除指定名称的cookie,可以将其过期时间设定为一个过去的时间
export function delCookie(name){
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=a; expires=" + date.toGMTString();
}

//读取所有保存的cookie字符串
function allCookie(){
var str = document.cookie;
if (str == "") {
str = "没有保存任何cookie";
}
alert(str);
}

export 在main.js写下
import {addCookie, getCookie, delCookie} from '路径';
Vue.prototype.$cookieStore = {
addCookie,
getCookie,
delCookie
}

使用:
this.$cookieStore.addCookie( 'name' , 1)
this.$cookieStore.getCookie( 'name' , 1)
this.$cookieStore.delCookie( 'name' , 1)

vue之vue-cookies安装和使用说明的更多相关文章

  1. sublime vue 语法高亮插件安装

    默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下:   第一,在 s ...

  2. 3.sublime vue 语法高亮插件安装

    默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下:   第一,在 s ...

  3. vue.js下载及安装配置

    环境 Deepin15.4 下载及配置 node下载地址:http://nodejs.cn/download/ 解压到文件夹 /home/maskerk/vue/ 下 设置软连接: $ ln -s / ...

  4. Vue学习小结(一)安装依赖与数据来源

    不多说啥了,生活中都是各种阵痛与惊喜.最近在学习vue框架,刚写完一个小型的后台管理系统(https://github.com/michaelzhengzm/info-manager-systerm_ ...

  5. vue之cli脚手架安装和webpack-simple模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  6. VUE知识day3_vue-cli脚手架安装和webpack模板项目生成

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  7. Vue(3)- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用

    一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...

  8. vue笔记 介绍及安装 一

    Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  9. vue(1)安装

    1.安装node.js(https://nodejs.org/en/),我安装的是 v10.15.1 1).在nodejs安装路径下,新建node_global和node_cache两个文件夹 2). ...

随机推荐

  1. (4.24)sql server变量中set与select的区别

    SET vs SELECT是SQL极客之间讨论的常见话题,也是最受欢迎的面试问题之一.SET用于为变量赋值,SELECT用于赋值或从变量/ table / view等中选择值. 让我们看看在不同场景中 ...

  2. shell日志分析进阶篇

    前面我们说了shell分析日志常用指令,现在我们随ytkah一起看看shell日志分析进阶篇,假设日志文件为ytkah.log //统计不重复抓取数量 cat ytkah.log | awk '{pr ...

  3. 【剑指offer】复杂链表的复制

    一.题目: 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的head.(注意,输出结果中请不要返回参数中的节点引用, ...

  4. 解决Linux 下 root用户删除文件提示:Operation not permitted

    问题描述 用最高权限rm文件,居然报错Operation not permitted.查看权限也没有问题.可想而知有可能文件被保护了.用命令lsattr检查一下就知道. [root@linux roo ...

  5. MySql语句常用命令整理---单表查询

    初始化t_employee表 创建t_employee表 -- DROP TABLE IF EXISTS test; CREATE TABLE t_employee ( _id INTEGER PRI ...

  6. git push 报错:missing Change-Id in commit message footer

    使用gerrit后,提交代码会出现如下截图问题: 临时解决: step1:把上面红色的那条gitidir复制下来执行下: step2:执行下面的命令会添加change_id git commit -- ...

  7. [LeetCode] 34. Find First and Last Position of Element in Sorted Array == [LintCode] 61. Search for a Range_Easy tag: Binary Search

    Description Given a sorted array of n integers, find the starting and ending position of a given tar ...

  8. [LeetCode] 系统刷题6_Linked List

    1. Dummy Node 2. Basic skills [LeetCode] 206. Reverse Linked List_Easy tag: Linked List 2. Fast slow ...

  9. R语言的scale函数

    1.数据的中心化 所谓数据的中心化是指数据集中的各项数据减去数据集的均值. 例如有数据集1, 2, 3, 6, 3,其均值为3 那么中心化之后的数据集为1-3,2-3,3-3,6-3,3-3,即:-2 ...

  10. 还是Go 为了伟大的未来

    今天,还是想讲讲Go 我觉得还没讲够,哈哈哈 其实,是想把框架再清晰些,因为上一篇框架没能引入goroutine(协程),感觉比较遗憾 下边,我就用上goroutine,但这里的协程仅是为了演示,没有 ...