模仿淘宝搜索历史--关于vue中使用cookie,去除重复关键字搜索

下面是自己项目中遇到的问题,根据网上各位大神的代码整理出来的一份

1、在main.js封装Cookie方法,方便全局调用

Vue.prototype.getCookie = function (name) {

    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

    if (arr = document.cookie.match(reg))

        return unescape(arr[2]);

    else

        return null;

}

Vue.prototype.setCookie=function(cname, cvalue, exdays) {

    var d = new Date();

    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));

    var expires = "expires=" + d.toUTCString();

document.cookie = cname + "=" + cvalue + "; " + expires+"; path=/" 

}

2、在组建里面新建方法并去调用封装的cookie

setkeywords(item){

   var item=item.toString();//统一转字符串,不然别的类型就去重不了了

   if(this.getCookie('keywords')){

      var keywords=this.getCookie('keywords').split(',')

      keywords=keywords.concat([item])//重组要存的数组

   }else{

       var keywords=[item]//如果这个名字的cookie不存在,新建数组

   }

   var arr=new Set(keywords)//数组去重

   var newkeywords=Array.from(arr)//将Set结构的数据转换为真正的数组

   console.log(newkeywords)

   this.setCookie('keywords',newkeywords,30)//调用cookie存储

   this.getkeywords()

 },

//获取cookie

getkeywords() {

//把字符串转换成数组

     var keywords=this.getCookie('keywords').split(',')

     console.log(keywords)

}

猜你喜欢

转载自blog.csdn.net/weixin_38289645/article/details/80900321
今日推荐