话不多说,直接上代码。

html部分:

记住密码

登录

JS部分:

data() {

return {

logining: false,

ruleForm2: {

account: '',

checkPass: ''

},

rules2: {

account: [

{required: true, message: '请输入账号', trigger: 'blur'},

],

checkPass: [

{required: true, message: '请输入密码', trigger: 'blur'},

]

},

checked: true,

msg:''

};

},

methods: {

handleSubmit2(formName) {

let self = this;

//判断复选框是否被勾选 勾选则调用配置cookie方法

if (self.checked == true) {

//传入账号名,密码,和保存天数3个参数

self.setCookie(self.ruleForm2.account, self.ruleForm2.checkPass, 7);

}else {

//清空Cookie

self.clearCookie();

}

        //设置cookie
setCookie(c_name, c_pwd, exdays) {
var exdate = new Date(); //获取时间
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
//字符串拼接cookie
window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
},
//读取cookie
getCookie: function() {
if (document.cookie.length > 0) {
var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('='); //再次切割
//判断查找相对应的值
if (arr2[0] == 'userName') {
this.ruleForm2.account = arr2[1]; //保存到保存数据的地方
} else if (arr2[0] == 'userPwd') {
this.ruleForm2.checkPass = arr2[1];
}
}
}
},
//清除cookie
clearCookie: function() {
this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
} },
mounted(){
this.getCookie();
}
}

vue记住密码功能的更多相关文章

  1. vue项目实现记住密码功能

     一.谷歌浏览的残留问题 现在很多的网站都有一个需求是记住密码这个功能,为的是避免用户下次登录的时候繁琐的输入过程. 像是一些主流的浏览器(比如Chrome)都有了这个功能,而且如果你登录了Chrom ...

  2. java实现记住密码功能(利用cookie)

    <br> <input type="text" id="userName" name="userName" value=& ...

  3. 通过sharedpreferences实现记住密码功能

    通过sharedpreferences实现记住密码功能

  4. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  5. cookie记住密码功能

    很多门户网站都提供了记住密码功能,虽然现在的浏览器都已经提供了相应的记住密码功能 效果就是你每次进入登录页面后就不需要再进行用户名和密码的输入: 记住密码功能基本都是使用cookie来进行实现的,因此 ...

  6. 【原创】js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse res ...

  7. android: SharedPreferences实现记住密码功能

    既然是实现记住密码的功能,那么我们就不需要从头去写了,因为在上一章中的最佳实 践部分已经编写过一个登录界面了,有可以重用的代码为什么不用呢?那就首先打开 BroadcastBestPractice 项 ...

  8. js中记住密码功能

    js中记住密码功能(在前端实现) 直接上例子(如果你也要实现的话注意改一些变量名称,jsp代码不包含样式) Jsp代码: <form class="am-form tpl-form-l ...

  9. js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,代码如下: //设置cookie var passKey = '4c05c54d952b11e691d76c0b843ea7f9'; function setCookie( ...

随机推荐

  1. C语言回调函数详解

    1. 什么是回调函数? 回调函数,光听名字就比普通函数要高大上一些,那到底什么是回调函数呢?恕我读得书少,没有在那本书上看到关于回调函数的定义.我在百度上搜了一下,发现众说纷纭,有很大一部分都是使用类 ...

  2. 将java程序打包成exe文件

    一. 1. 项目右击,导出 jar文件 2. 下一步,选择 3. 完成 二. 1. 下载exe4j,并破解 2. 其他的步骤都好说,我主说这个步骤,一定要讲所有引用的jar包放到里面否则会报找不到文件 ...

  3. 分布式缓存系统 Memcached 状态机之socket连接与派发

    上节已经分析到了主线程中监听socket注册事件和工作线程中连接socket注册事件的回调函数都是event_handler,且event_handler的核心部分都是一个有限状态机:drive_ma ...

  4. 1059 Prime Factors

    题意: 给出一个int型正整数N,要求把N分解成若干个质因子,如N=97532468,则把N分解成:97532468=2^2*11*17*101*1291.质因子按增序输出,如果某个质因子的幂是1,则 ...

  5. 1120 Friend Numbers

    题意:略. 思路:水题,略. 代码: #include <iostream> #include <string> using namespace std; ; }; int m ...

  6. 七 Kafka Streams VS Consumer API

    1 kafka Streams:   概念: 处理和分析储存在Kafka中的数据,并把处理结果写回Kafka或发送到外部系统的最终输出点,它建立在一些很重要的概念上,比如事件时间和消息时间的准确区分, ...

  7. Linux - 归档和压缩

    归档 归档就是将多个文件或目录合并成一个文件 归档的目的就是方便备份.还原及文件的传输操作 tar 命令:将多个文件或目录归档到一个文件中,可以根据需要只还原归档文件中的某些指定的文件 c:创建,v: ...

  8. ctf中检测和分离隐藏的文件

    使用binwalk检测是否隐藏了文件 root@sch01ar:~# binwalk '/root/桌面/test.jpg' 还藏了一个zip文件,接下来用foremost来分离文件 root@sch ...

  9. java之飞机大战的记分标准

    import java.awt.Image; import java.util.ArrayList; import java.util.Timer; import javax.swing.ImageI ...

  10. 关于项目报错Dynamic Web Module 3.0 requires Java 1.6 or newer 的解决方法

    起因:今天使用maven创建web项目的时候发现项目上老是有个红X,错误如下图所示,虽然项目能正常运行起来,但是LZ的强迫症发作,不弄掉就觉得心里不舒服,于是上网查了攻略,几经周折最终大功告成,现在就 ...