博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue之vue-cookies安装和使用说明
阅读量:5870 次
发布时间:2019-06-19

本文共 2724 字,大约阅读时间需要 9 分钟。

vue之vue-cookies安装和使用说明

npm官方链接:

安装,在对应项目根目录下执行:

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)

转载地址:http://ojxnx.baihongyu.com/

你可能感兴趣的文章
可给pdf批量添加书签的神器
查看>>
CentOS Linux查询软件包的安装位置
查看>>
TFT LCD 7寸1024*600 FPGA点亮
查看>>
request.getInputStream()乱码处理方法
查看>>
Android硬件抽象层(HAL)深入剖析(二)
查看>>
iOS中perform+@selector多参数传递
查看>>
Mysql列类型:日期时间型
查看>>
java 编程中的非空判断怎么加才优雅?
查看>>
zookeeper的原理及应用
查看>>
如何阅读一本书(记录)
查看>>
BGP选路方法
查看>>
2011年度十大杰出IT博客
查看>>
SAS硬盘指示灯状态对照表
查看>>
java并发编程系列阅读笔记
查看>>
Configuring Hive On Spark
查看>>
spring boot中实现响应图片的方法以及改进
查看>>
Leetcode日记8
查看>>
Java多线程技能
查看>>
从 Project Professional 中登录 Project Server
查看>>
单链表的一些经典面试题
查看>>