vue之vue-cookies安装和使用说明
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安装和使用说明的更多相关文章
- sublime vue 语法高亮插件安装
默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下: 第一,在 s ...
- 3.sublime vue 语法高亮插件安装
默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下: 第一,在 s ...
- vue.js下载及安装配置
环境 Deepin15.4 下载及配置 node下载地址:http://nodejs.cn/download/ 解压到文件夹 /home/maskerk/vue/ 下 设置软连接: $ ln -s / ...
- Vue学习小结(一)安装依赖与数据来源
不多说啥了,生活中都是各种阵痛与惊喜.最近在学习vue框架,刚写完一个小型的后台管理系统(https://github.com/michaelzhengzm/info-manager-systerm_ ...
- vue之cli脚手架安装和webpack-simple模板项目生成
ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...
- VUE知识day3_vue-cli脚手架安装和webpack模板项目生成
ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...
- Vue(3)- 安装脚手架、过滤器、生命周期的钩子函数、vue-router基本使用
一.安装脚手架 1.下载node.js,本文下载版本为node-v8.12.0-x64.msi,一键式安装. 2.安装完成后,打开终端,输入node,可进入node环境(两次ctrl+c退出),如下图 ...
- vue笔记 介绍及安装 一
Vue.js 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...
- vue(1)安装
1.安装node.js(https://nodejs.org/en/),我安装的是 v10.15.1 1).在nodejs安装路径下,新建node_global和node_cache两个文件夹 2). ...
随机推荐
- apache在mac下403问题
症状:在mac下使用xampp环境,httpd.conf权限,但访问网站报403错误. 解决方案:将对应文件目录权限改为755 修改后,Thinkphp访问提示Application不可写,无法创建内 ...
- finecms同时调用子栏目和子栏目的文章怎么操作
之前ytkah写过dedecms如何调用当前栏目的子栏目及子栏目文章,那如果是finecms如何同时调用子栏目和子栏目的文章呢? {list action=category pid=0 id=31} ...
- kafka2 简单介绍
kafka是JMS的一种实现 JMS(java message service):middle ware,中间件技术.Queue:队列模式,P2P,点对点.publish-subscribe:主题模式 ...
- Python3学习之路~3.1 函数基本语法及特性、返回值、参数、局部与全局变量
1 函数基本语法及特性 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 特性: 减少重复代码 使程序变的可扩展 使程序变得易维护 语法定义: d ...
- Python字符串切片
1.字符串切片:从字符串中取出相应的元素,重新组成一个新的字符串 语法: 字符串[ 开始元素下标 : 结束元素下标 : 步长 ] # 字符串的每个元素都有正负两种下标 步长: ...
- Observer(__ob__: Observer) 对象添加属性
重点通过这句话给对象添加属性: this.$set(r,'upshow',false); 在data中定义laws来装从接口中请求到数据 data(){ return{ laws:[],//法律依据 ...
- axios封装异步获取数据的函数以及全局拦截
https://www.cnblogs.com/momozjm/p/7273272.html https://www.jianshu.com/p/9a1b99cd2ba6
- VS中属性配置ABC
1.包含目录和附加包含目录(库目录和附加库目录)的区别: 包含目录:修改了系统的include宏的值,是全局的: 附加包含目录:用于当前项目,对其他项目没有影响. (库目录和附加库目录的区别同上) 2 ...
- spring boot 的使用
一:首先安装spring boot插件 两种方式安装, 1:使用myeclipse自带的安装插件的功能 help> install from catalog> 将出现下面的界面,搜寻sp ...
- 算法bug修复
问题一: 160length:4length:4length:4length:4290length:2length:2160length:5length:5length:5length:5length ...