1.8.3 • Published 1 year ago

vue-cookies v1.8.3

Weekly downloads
66,480
License
MIT
Repository
github
Last release
1 year ago

vue-cookies

A simple Vue.js plugin for handling browser cookies

Installation

Browser

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-cookies@1.8.3/vue-cookies.js"></script>

Package Managers

npm install vue-cookies --save

// require
var Vue = require('vue')
Vue.use(require('vue-cookies'))

// es2015 module
import Vue from 'vue'
import VueCookies from 'vue-cookies'

// default options config: { expires: '1d', path: '/', domain: '', secure: '', sameSite: 'Lax' }
Vue.use(VueCookies, { expires: '7d'})

Api

  • vue2 :
  • vue3 :
    • Composition API: $cookies.method
        // js
        const $cookies = inject('$cookies');
        // ts
        const $cookies = inject<VueCookies>('$cookies'); 
    • Options API : this.$cookies.method

  • Set global config
$cookies.config(expires[,path[, domain[, secure[, sameSite]]])  // default: expires = 1d, path = '/', domain = '', secure = '', sameSite = 'Lax'
  • Set a cookie
$cookies.set(keyName, value[, expires[, path[, domain[, secure[, sameSite]]]]])   //return this
  • Get a cookie
$cookies.get(keyName)  // return value                             
  • Remove a cookie
$cookies.remove(keyName [, path [, domain]])  // return false or true
  • Exist a cookie name
$cookies.isKey(keyName)  // return false or true
  • Get All cookie name
$cookies.keys()  // return a array

Example Usage

set global config

// 30 day after, expire
Vue.$cookies.config('30d')

// set secure, only https works
Vue.$cookies.config('7d','','',true)

// 2019-03-13 expire
this.$cookies.config(new Date(2019,03,13).toUTCString())

// 30 day after, expire, '' current path , browser default
this.$cookies.config(60 * 60 * 24 * 30,'');

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","1d")
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX","1D")
        // Base of second
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX",60 * 60 * 24)
        // input a Date, + 1day
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", new Date(2017, 03, 12))
        // input a date string, + 1day
        .set("user_session","25j_7Sl6xDq2Kc3ym0fmrSSk2xV2XkUkX", "Sat, 13 Mar 2017 12:25:57 GMT")

set expire times, input number type

this.$cookies.set("default_unit_second","input_value",1);            // 1 second after, expire
this.$cookies.set("default_unit_second","input_value",60 + 30);      // 1 minute 30 second after, expire
this.$cookies.set("default_unit_second","input_value",60 * 60 * 12); // 12 hour after, expire
this.$cookies.set("default_unit_second","input_value",60 * 60 * 24 * 30); // 1 month after, expire

set expire times - end of browser session

this.$cookies.set("default_unit_second","input_value",0);          // end of session - use 0 or "0"!

set expire times , input string type

Unitfull name
yyear
mmonth
dday
hhour
minminute
ssecond

Unit Names Ignore Case

not support the combination

not support the double value

this.$cookies.set("token","GH1.1.1689020474.1484362313","60s");  // 60 second after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","30MIN");  // 30 minute after, expire, ignore case
this.$cookies.set("token","GH1.1.1689020474.1484362313","24d");  // 24 day after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","4m");  // 4 month after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","16h");  // 16 hour after, expire
this.$cookies.set("token","GH1.1.1689020474.1484362313","3y");  // 3 year after, expire

// input date string 
this.$cookies.set('token',"GH1.1.1689020474.1484362313", new Date(2017,3,13).toUTCString());
this.$cookies.set("token","GH1.1.1689020474.1484362313", "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", date);

set never expire

this.$cookies.set("token","GH1.1.1689020474.1484362313", Infinity);  // never expire
// never expire , only -1,Other negative Numbers are invalid
this.$cookies.set("token","GH1.1.1689020474.1484362313", -1); 

remove cookie

this.$cookies.set("token",value); // domain.com and *.doamin.com are readable
this.$cookies.remove("token"); // remove token of domain.com and *.doamin.com 

this.$cookies.set("token", value, null, null, "domain.com"); // only domain.com are readable
this.$cookies.remove("token", null, "domain.com"); // remove token of domain.com 

set other arguments

// set path
this.$cookies.set("use_path_argument","value","1d","/app");  

// set domain
this.$cookies.set("use_path_argument","value",null, null, "domain.com");   // default 1 day after,expire

// set secure
this.$cookies.set("use_path_argument","value",null, null, null,true);

// set sameSite - should be one of `None`, `Strict` or `Lax`. Read more https://web.dev/samesite-cookies-explained/
this.$cookies.set("use_path_argument","value",null, null, null, null, "Lax");

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"); 

// remove all cookie
this.$cookies.keys().forEach(cookie => this.$cookies.remove(cookie))

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

Warning

$cookies key names Cannot be set to 'expires','max-age','path','domain','secure','SameSite'

License

MIT Copyright (c) 2016-present, cmp-cc

powerplat@tiago.ethical.id/magic-sidebar@monksoftware/bob-core-webchatheiseon-authcmb-auth-123cmb-auth11cmb-authcmb-auth-11h5-form-designlibrary-vuegc-templateta404-ui-clitest-cjlvue-sectionsxiaoka-js1@moreillon/another_templateinvitations_constructor@isense-development/ui-templatevue-cookie-consentstray-birds@huangjiahao/dg-uicarbon-zero-widget_simon@moreillon/vue_access_control@moreillon/vue_login_form@moreillon/vue_login_statusform-design-h5@infinitebrahmanuniverse/nolb-vue-cohy-frontend-components-test@everything-registry/sub-chunk-3077cm-form-design-mobilek6-admin-permissionljdata-maplmj-pluginkerry-basekhari-componentkhari-componentslogin-fsocietylogin-yssnicai-myuimodules-projectmobile-form-designmo2frontmgt-basejr-componentjsc3d11mysingpronbjosephmenu-layoutmedcrab-operate-plugins@solutech/auth@ui-toolkit/auth@statikbe/repair-components@tapni/auth@tapni/sso@xuan_hoo/front-uiaipin-cli@xk-s2b/plugin@xk5/editor@yj_chen/front-ui@zum-front-core/comment-component@x-store/vue-comments@andry.dharmawan/vue-componentapps-scanner-pocas-c-vue-neoas-c-vue-neo-bbilling-portalbelair-storecloud-dict-webscloudcc-base-sdkcloud-headcloud-module-basebot-vue-components-libscomponent706compaerjson_jy@cz-nic/fred-ferdabs-datatablesbp-vue@bloxypro/bloxy-pro-tovy-eggcarbon-zero-widgetcarbon-zero-widget_stagingccsiot-form-design-h5ocnpsnut-mgto-din-packagepublicis-commonradicle-lsatqscorpio-loginpl-evaluation-flow-testplatform-authrbd-componentspbx-plugin-peppol-topbarplvx-evaluation-flow-testsd-bm2.0zyrl-loginmaskzyd-mytoolszy_pmsxiaoka-jsxhyx-live-publicyxz-portal-webuiyzy-website
1.8.3

1 year ago

1.8.2

1 year ago

1.8.1

2 years ago

1.8.0

2 years ago

1.7.6

2 years ago

1.7.5

2 years ago

1.7.4

4 years ago

1.7.3

4 years ago

1.7.2

4 years ago

1.7.1

4 years ago

1.7.0

4 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.5.14

4 years ago

1.5.13

5 years ago

1.5.12

5 years ago

1.5.11

5 years ago

1.5.10

5 years ago

1.5.9

5 years ago

1.5.8

5 years ago

1.5.7

6 years ago

1.5.6

6 years ago

1.5.5

6 years ago

1.5.4

7 years ago

1.5.3

7 years ago

1.2.0

7 years ago

1.1.0

7 years ago

1.0.0

7 years ago