zoukankan      html  css  js  c++  java
  • 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)

  • 相关阅读:
    VS扩展开发 二 从示例程序出发
    VS扩展开发 一 导航
    CLR笔记 二 函数调用
    使用C#调用C++类库
    C#编程常用工具总结
    CLR笔记 一 概述
    C#工程中 使用targets和props实例
    VS C++工程的静态库引用问题
    C#高级编程笔记(三)
    (转)如何让CPU的使用率一直在50%
  • 原文地址:https://www.cnblogs.com/zdz8207/p/vuejs-vue-cookies.html
Copyright © 2011-2022 走看看