【Vue】Cookie实现登录记住密码功能

登录页效果图:

主要思路是利用浏览器Cookie来存储用户登录信息。除了存储用户名和密码外,还存储了一个记住密码的标志位,如果勾选了,则为true,反之为false。当用户登录时,不论用户有没有勾选“记住密码”,都会先将信息存入Cookie,区别在于,如果没勾选,则会在用户退出登录时,清除Cookie。当然存储信息的方法还有很多种,Cookie一般适用于存储数据量很小的数据。

登录页代码如下:

<style  scoped>
.m-container {
  background: url("../assets/bg.jpg");
  background-size: cover;
  height: 100%;
  min-height: 1000px;
  text-align: center;
  min-width: 420px;
}
.h200{
  height: 200px
}
.global{
  color: white;width: 500px;margin: auto;height: 300px;border:  1px solid gray;
}
.wel{
    font-size: 18px;font-weight:bold;margin: auto;width: 100px;padding: 20px 10px;
}
.mt10{
    margin-top: 10px
}
</style>
<template>
<div class="m-container">
  <div class="h200"></div>
  <div class="global">
    <div class="wel">欢迎登陆</div>
    <el-form class="mt10">
      <el-form-item>
        <el-input :maxlength="128" placeholder="用户名" style="width: 60%;" v-model="username"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input :maxlength="128" placeholder="密码" type="password" style="width: 60%" v-model="password"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked">记住密码</el-checkbox>
      <br>
      <br>
      &
  • 3
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值