Vue-cookies-ts NPM

vue-cookies-ts

A simple Vue.js plugin for handling browser cookies

Installation

npm install vue-cookies-ts --save

import Vue from "vue"
import VueCookies from "vue-cookies-ts"

Vue.use(VueCookies)

Api

syntax format: this | Vue | window.$cookies.method

config

Set global config

(option: CookiesOption) => void

//example

this.$cookies.config({
    expires?: string | number | Date,
    path?: string,
})  // default: expireTimes = 1d , path=/

set

Set a cookie

(key: string, value: any, option: CookiesOption) => VueCookies

//example

this.$cookies.set(keyName: string, {
    expires?: string | number | Date,
    path?: string,
    domain?: string,
    secure?: boolean
})

get

Get a cookie

(key: string) => string | null | object

//example

this.$cookies.get(keyName: string)

remove

Remove a cookie

(key: string, option: CookiesOption) => VueCookies | boolean

//example

this.$cookies.remove(keyName: string, {path: string, domain: string})

isKey

If exist a cookie name

(key: string) => boolean

//example

this.$cookies.isKey(keyName: string)

keys

Get All cookie name

() => string[]

//example

this.$cookies.keys()

Example Usage

Set global config

// 30 day after, expire
this.$cookies.config({ expires: "30d" })

this.$cookies.config({ expires: new Date(2019,03,13).toUTCString() })

// 30 day after, expire, '' current path , browser default
this.$cookies.config({ expires: 60 * 60 * 24 * 30, path: "" })

// window object
window.$cookies.config({ expires: "30d" })

Support json object

var user = { id:1, name:'Journal', session:'25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX' }

this.$cookies.set('user', user)

// print user name
console.log(this.$cookies.get('user').name)

Set expire times

Suppose the current time is : Sat, 11 Mar 2017 12:25:57 GMT

Following equivalence: 1 day after, expire

Support chaining sets together

 // default expire time: 1 day
this.$cookies
        .set("user_session", "25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX")
        // number + d , ignore case
        .set("user_session", "25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", { expires: "1d" })
        .set("user_session", "25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", { expires: "1D" })
        // Base of second
        .set("user_session", "25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", { expires: 60 * 60 * 24 })
        // input a Date, + 1day
        .set("user_session", "25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", { expires: new Date(2017, 03, 12) })
        // input a date string, + 1day
        .set("user_session", "25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", { expires: "Sat, 13 Mar 2017 12:25:57 GMT" })

Set expire times, input number type

// 1 second after, expire
this.$cookies.set("default_unit_second", "input_value", { expires: 1 })

// 1 minute 30 second after, expire
this.$cookies.set("default_unit_second", "input_value", { expires: 60 + 30 })

// 12 hour after, expire
this.$cookies.set("default_unit_second", "input_value", { expires: 60 * 60 * 12 })

// 1 month after, expire
this.$cookies.set("default_unit_second", "input_value", { expires: 60 * 60 * 24 * 30 })

Set expire times - end of browser session

// end of session - use string!
this.$cookies.set("default_unit_second", "input_value", { expires: "0" })

Set expire times , input string type

Unit	full name
y	year
m	month
d	day
h	hour
min	minute
s	second

✔ caseless for unit

❌ combination not supported

❌ double value not supported

// 60 second after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313", { expires: "60s" })

// 30 minute after, expire, ignore case
this.$cookies.set("token","GH1.1.1689020474.1484362313", { expires: "30min" })

// 24 day after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313", { expires: "24d" })

// 4 month after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313", { expires: "4m" })

// 16 hour after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313", { expires: "16h" })

// 3 year after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313", { expires: "3y" })

// input date string 
this.$cookies.set('token',"GH1.1.1689020474.1484362313", { expires: new Date(2017,03,13).toUTCString() })

this.$cookies.set("token","GH1.1.1689020474.1484362313", { expires: "Sat, 13 Mar 2017 12:25:57 GMT " })

Set expire support date

var date = new Date

date.setDate(date.getDate() + 1)

this.$cookies.set("token","GH1.1.1689020474.1484362313", { expires: date })

Set never expire

// never expire
this.$cookies.set("token","GH1.1.1689020474.1484362313", { expires: Infinity })

// never expire , only -1,Other negative Numbers are invalid
this.$cookies.set("token","GH1.1.1689020474.1484362313", { expires: -1 })

Set other arguments

// set path
this.$cookies.set("use_path_argument","value", { expires: "1d", path: "/app" })

// set domain, default 1 day after,expire
this.$cookies.set("use_path_argument","value", { domain: "domain.com" })

// set secure
this.$cookies.set("use_path_argument","value", { secure: true })

Other operation

// check a cookie exist
this.$cookies.isKey("token")

// get a cookie
this.$cookies.get("token")

// remove a cookie
this.$cookies.remove("token")

// get all cookie key names, line shows
this.$cookies.keys().join("\n") 

// vue-cookies global
[this | Vue].$cookies.[method]