vue中cookies的使用方式

 更新时间:2024年08月31日 08:44:34   作者:芒果沙冰哟  
这篇文章主要介绍了vue中cookies的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue中cookies的使用

有时候做登录时会有一个记住密码的需求,这个时候可以使用cookies把账号密码存起来,下次再进来就免去了输入账号密码的需求,

  • 如图:

原生cookies操作比较麻烦

这里我们使用js-cookies,先下载:

npm install --save js-cookie

安装成功后在需要的地方进行调用:

import Cookies from "js-cookie";

先看看在data中定义的表单数据:

  data() {
      return {
        //登录表单
        loginForm: {
          username: "", //用户名
          password: "", //密码
          captcha: "", //验证码的值
          isRemember: false, //是否记住密码
        },
      }
    },

写在methods中的函数:

 created() {
      //一进页面就先获取cookies里面的参数
      this.getCookie()
    },
    methods: {
      // 获取cookie参数
      getCookie() {
        const username = Cookies.get("username");
        const password = Cookies.get("password");
        const isRemember = Cookies.get("isRemember");
        this.loginForm.username =
          username == undefined ? this.loginForm.username : username;
        this.loginForm.password =
          password == undefined ? this.loginForm.password : decrypt(password);
        this.loginForm.isRemember =
          isRemember == undefined ? false : Boolean(isRemember);
        Cookies.remove('data');
      },
    },
    onLogin() {
      //点击登录函数时,如果勾选记住密码
      if (this.loginForm.isRemember) {
        // 把账号密码等参数存到cookies,设置时间为30天
        Cookies.set("username", this.loginForm.username, {
          expires: 30,
        });
        Cookies.set("password", this.loginForm.password, {
          expires: 30,
        });
        Cookies.set("isRemember", this.loginForm.isRemember, {
          expires: 30,
        });
      } else {
        //如果此时没有勾选记住密码,就把cookies里面的参数移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("isRemember");
      }
      //把登录名和用户名存好后,开始发接口请求数据,此处省略....
    },

cookies的使用方式:储存、获取、删除三种

  • 存:
Cookies.set('userName', '嘻嘻嘻', { expires: 3 });
  • 取:
JSON.parse(Cookies.get('userName'))
  • 删:
Cookies.remove('userName')

总结

大功告成,完结~

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue插件打包与发布的方法示例

    Vue插件打包与发布的方法示例

    插件功能开发完成后,若需要发布到公共组件库中(例如:npmjs),需要对插件进行打包并发布,这篇文章主要介绍了Vue插件打包与发布的方法示例,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 在Vue中实现地图热点展示与交互的方法详解(如热力图)

    在Vue中实现地图热点展示与交互的方法详解(如热力图)

    随着大数据和可视化技术的发展,地图热点展示越来越受到人们的关注,在Vue应用中,我们通常需要实现地图热点的展示和交互,以便更好地呈现数据和分析结果,本文将介绍在Vue中如何进行地图热点展示与交互,包括热力图、点聚合等
    2023-07-07
  • vue实现tab路由切换组件的方法实例

    vue实现tab路由切换组件的方法实例

    这篇文章主要给大家介绍了关于vue实现tab路由切换组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • vue使用路由router-view的详细代码

    vue使用路由router-view的详细代码

    这篇文章主要介绍了vue使用路由router-view的相关知识,其原理就是采用 SPA(single-page-application) 模式,就是只有一个 Web 页面的应用,通过 router 来控制页面的刷新和迭代,感兴趣的朋友一起看看吧
    2023-12-12
  • Vue+SpringBoot开发V部落博客管理平台

    Vue+SpringBoot开发V部落博客管理平台

    V部落是一个多用户博客管理平台。这篇文章主要介绍了Vue+SpringBoot开发V部落博客管理平台,需要的朋友可以参考下
    2017-12-12
  • vue过滤器用法实例分析

    vue过滤器用法实例分析

    这篇文章主要介绍了vue过滤器用法,结合实例形式总结分析了vue.js常见过滤器相关使用技巧与操作注意事项,需要的朋友可以参考下
    2019-03-03
  • vue实现图片裁剪后上传

    vue实现图片裁剪后上传

    这篇文章主要为大家详细介绍了vue实现图片裁剪后上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • vue基础语法之插值表达式详解

    vue基础语法之插值表达式详解

    这篇文章主要为大家详细介绍了vue基础语法之插值表达式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • Vue--Router动态路由的用法示例详解

    Vue--Router动态路由的用法示例详解

    这篇文章主要介绍了Vue--Router动态路由的用法,很多时候,我们需要将给定匹配模式的路由映射到同一个组件,在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为路径参数,本文对Vue Router动态路由相关知识给大家介绍的非常详细,需要的朋友参考下吧
    2022-08-08
  • 对vue中v-on绑定自定事件的实例讲解

    对vue中v-on绑定自定事件的实例讲解

    今天小编就为大家分享一篇对vue中v-on绑定自定事件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论