vue项目使用cookie储存并封装

Posted 2021-06-07 野猪佩奇007

vue项目使用cookie储存并封装或node安装

第一种方法自己封装js并引用，第二种方法npm安装vue-cookie

一、使用步骤

1.在assets文件夹中新建js文件夹里面新建cookie.js

代码如下：

export function setCookie(c_name,value,expire) {
    var date=new Date()
    date.setSeconds(date.getSeconds()+expire)
    document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
    //console.log(document.cookie)
}
//存储cookie，c_name存储名称，value存储值，expire存储时间，单位秒
//使用方法 this.$cookieStore.setCookie( 'userName' ,'666', 600)//存入用户名，设置有效时间10分钟)一天为 86400 s
export function getCookie(c_name){
    if (document.cookie.length>0){
        let c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1){
            c_start=c_start + c_name.length+1
            let c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1) c_end=document.cookie.length
                return unescape(document.cookie.substring(c_start,c_end))
            }
        }
    return ""
}
//获取cookie存储，c_name存储名称
//使用方法  console.log(this.$cookieStore.getCookie( 'userName' ));
export function delCookie(c_name){
    setCookie(c_name, "", -1)
}
//删除cookie存储，c_name存储名称
//使用方法this.$cookieStore.delCookie( 'userName' )

2.引入

在main.js中引入代码如下（示例）：

import {setCookie,getCookie,delCookie} from '@/assets/js/cookie'//cookie存储

Vue.prototype.$cookieStore = {setCookie,getCookie,delCookie}//cookie存储方法

使用：

mounted() {
      console.log(this.$cookieStore.getCookie('userName'))//''
      this.$cookieStore.setCookie( 'userName' ,'666', 600)
      console.log(this.$cookieStore.getCookie('userName'))//'666'
      this.$cookieStore.delCookie('userName')
      console.log(this.$cookieStore.getCookie('userName'))//''
  },

第二种方法

通过npm安装

npm install vue-cookie --save

引入：引入到main.js/app.js都可

var VueCookie = require('vue-cookie');
// Tell Vue to use the plugin
Vue.use(VueCookie);

使用：

// From some method in one of your Vue components
this.$cookie.set('test', 'Hello world!', 1);
// This will set a cookie with the name 'test' and the value 'Hello world!' that expires in one day
 
// To get the value of a cookie use
this.$cookie.get('test');
 
// To delete a cookie use
this.$cookie.delete('test');