【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>
      &