Vue项目优化之保存密码

保存密码功能

在目前大多数网站中,在你登录时都拥有保存密码的功能.因此在我的vue项目优化过程中添加该功能

思路

实现过程: 在点击登录按钮后,如果是正确的账号密码,就将账号作为cookie名称,将密码作为cookie的值进行保存;在第二次登陆时,账号输入框失焦后触发事件,开始查找以当前输入框账号为名称的cookie值,如果找到就返回密码,如果未找到就返回空字符串.

实现代码

先创建一个js文件用于引入

export function setCookie (cname, cvalue) {
  var d = new Date()
  d.setTime(d.getTime() + 14 * 24 * 60 * 60 * 1000)
  var expires = 'expires=' + d.toGMTString()
  document.cookie = cname + '=' + cvalue + ';' + expires
}

export function getCookie (cname) {
  var name = cname + '='
  var ca = document.cookie.split(';')
  for (let i = 0; i < ca.length; i++) {
    var c = ca[i].trim()
    if (c.indexOf(name) === 0) {
      return c.substring(name.length, c.length)
    } else {
      return ''
    }
  }
}

在登陆组件中引入文件并获取方法

在登录验证成功后,保存到cookie中

在账号输入框失焦后,触发事件开始获取对应的密码

实现效果

第一次登陆:

第二次登陆: