首页 >> js开发 >> js前端vue+elementUI如何实现记住密码功能js大全
js前端vue+elementUI如何实现记住密码功能js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
我们这回使用纯前端保存密码既然是记住密码,前端也就是使用cookie保存,访问时用cookie读取先来了解下cookie的基本使用吧CookieCookie所有的cookie信息都在document.cookie中存放着,是一个字符串,里面的cookie以分号和空格分隔。就像这样:
"key1=value1; key2=value2; key3=value3"
// 使用document.cookie 来获取所有cookie
docuemnt.cookie = "id="+value
"key1=value1; key2=value2; key3=value3"
// 使用document.cookie 来获取所有cookie
docuemnt.cookie = "id="+value
操作cookie
/**
* 设置cookie值
*
* @param {String} name cookie名称
* @param {String} value cookie值
* @param {Number} expiredays 过期时间,天数
*/
function setCookie (name, value, expiredays) {
let exdate = new Date()
//setDate获取N天后的日期
exdate.setDate(exdate.getDate() + expiredays) //getDate() 获取当前月份的日 + 过期天数
document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
}
/**
* 获取cookie值
* @param {String} name cookie名称
*/
function getCookie (name) {
var arr = document.cookie.split(";") //转换数组
//["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
for(var i=0;i
var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
if(arr2[0].trim() == name){
return arr2[1]
}
}
}
/**
* 删除指定cookie值
* @param {String} name cookie名称
*/
function clearCookie (name) {
setCookie(name, '', -1)
}
/**
* 浏览器是否支持本地cookie
*/
function isSupportLocalCookie () {
let {name, value} = {name: 'name', value: 'mingze'}
setCookie(name, value, 1) //设置cookie
return getCookie(name).includes(value) //includes 判断数组name中是否含有当前value(返回true or false)
}
/**
* 设置cookie值
*
* @param {String} name cookie名称
* @param {String} value cookie值
* @param {Number} expiredays 过期时间,天数
*/
function setCookie (name, value, expiredays) {
let exdate = new Date()
//setDate获取N天后的日期
exdate.setDate(exdate.getDate() + expiredays) //getDate() 获取当前月份的日 + 过期天数
document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
}
/**
* 获取cookie值
* @param {String} name cookie名称
*/
function getCookie (name) {
var arr = document.cookie.split(";") //转换数组
//["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
for(var i=0;i
var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
if(arr2[0].trim() == name){
return arr2[1]
}
}
}
/**
* 删除指定cookie值
* @param {String} name cookie名称
*/
function clearCookie (name) {
setCookie(name, '', -1)
}
/**
* 浏览器是否支持本地cookie
*/
function isSupportLocalCookie () {
let {name, value} = {name: 'name', value: 'mingze'}
setCookie(name, value, 1) //设置cookie
return getCookie(name).includes(value) //includes 判断数组name中是否含有当前value(返回true or false)
}
好了了解了cookie我们开始如何实现一个简单的记住密码功能HTML代码
status-icon
ref="ruleForm"
label-position="left"
label-width="0px"
class="demo-ruleForm login-page">
v-model="ruleForm2.username"
auto-complete="off"
placeholder="用户名"
>
v-model="ruleForm2.password"
auto-complete="off"
placeholder="密码"
>
记住密码
登录
status-icon
ref="ruleForm"
label-position="left"
label-width="0px"
class="demo-ruleForm login-page">
v-model="ruleForm2.username"
auto-complete="off"
placeholder="用户名"
>
v-model="ruleForm2.password"
auto-complete="off"
placeholder="密码"
>
记住密码
登录
vue代码
data(){
return {
logining: false,
checked: true
ruleForm: {
username: '',
password: '',
},
rules: {
username: [{required: true, message: '请输入您的帐户', trigger: 'blur'}],
password: [{required: true, message: '请输入您的密码', trigger: 'blur'}]
},
}
},
mounted() {
this.account() //获取cookie的方法
},
account(){
if(document.cookie.length <= 0){
console.log(this.getCookie('mobile'))
this.ruleForm.username = this.getCookie('mobile')
this.ruleForm.password = this.getCookie('password')
}
},
setCookie(c_name,c_pwd,exdate){ //账号,密码 ,过期的天数
var exdate = new Date()
console.log(c_name,c_pwd)
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //保存的天数
document.cookie ="mobile="+c_name+";path=/;expires="+exdate.toLocaleString()
document.cookie ="password="+c_pwd+";path=/;expires="+exdate.toLocaleString()
},
getCookie(name){
var arr = document.cookie.split(";")
//["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
for(var i=0;i
var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
if(arr2[0].trim() == name){
return arr2[1]
}
}
},
clearCookie(){
this.setCookie("","",-1) //清除cookie
},
handleSubmit(){ //提交登录
this.$refs.ruleForm.validate((valid) => {
if(valid){
this.logining = true;
var _this = this;
if(_this.checked == true){
//存入cookie
_this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7) //保存7天
}else{
_this.clearCookie();
}
Login({
mobile:_this.ruleForm.username,
password:_this.ruleForm.password
}).then((result) => {
console.log(result)
_this.$alert('登陆成功')
})
}
}
data(){
return {
logining: false,
checked: true
ruleForm: {
username: '',
password: '',
},
rules: {
username: [{required: true, message: '请输入您的帐户', trigger: 'blur'}],
password: [{required: true, message: '请输入您的密码', trigger: 'blur'}]
},
}
},
mounted() {
this.account() //获取cookie的方法
},
account(){
if(document.cookie.length <= 0){
console.log(this.getCookie('mobile'))
this.ruleForm.username = this.getCookie('mobile')
this.ruleForm.password = this.getCookie('password')
}
},
setCookie(c_name,c_pwd,exdate){ //账号,密码 ,过期的天数
var exdate = new Date()
console.log(c_name,c_pwd)
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //保存的天数
document.cookie ="mobile="+c_name+";path=/;expires="+exdate.toLocaleString()
document.cookie ="password="+c_pwd+";path=/;expires="+exdate.toLocaleString()
},
getCookie(name){
var arr = document.cookie.split(";")
//["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
for(var i=0;i
var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
if(arr2[0].trim() == name){
return arr2[1]
}
}
},
clearCookie(){
this.setCookie("","",-1) //清除cookie
},
handleSubmit(){ //提交登录
this.$refs.ruleForm.validate((valid) => {
if(valid){
this.logining = true;
var _this = this;
if(_this.checked == true){
//存入cookie
_this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7) //保存7天
}else{
_this.clearCookie();
}
Login({
mobile:_this.ruleForm.username,
password:_this.ruleForm.password
}).then((result) => {
console.log(result)
_this.$alert('登陆成功')
})
}
}
好了,这回的记住密码就到这里,小伙伴们一起努力吧 ^ 0 ^总结总结
"key1=value1; key2=value2; key3=value3"
// 使用document.cookie 来获取所有cookie
docuemnt.cookie = "id="+value
"key1=value1; key2=value2; key3=value3"
// 使用document.cookie 来获取所有cookie
docuemnt.cookie = "id="+value
操作cookie
/**
* 设置cookie值
*
* @param {String} name cookie名称
* @param {String} value cookie值
* @param {Number} expiredays 过期时间,天数
*/
function setCookie (name, value, expiredays) {
let exdate = new Date()
//setDate获取N天后的日期
exdate.setDate(exdate.getDate() + expiredays) //getDate() 获取当前月份的日 + 过期天数
document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
}
/**
* 获取cookie值
* @param {String} name cookie名称
*/
function getCookie (name) {
var arr = document.cookie.split(";") //转换数组
//["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
for(var i=0;i
var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
if(arr2[0].trim() == name){
return arr2[1]
}
}
}
/**
* 删除指定cookie值
* @param {String} name cookie名称
*/
function clearCookie (name) {
setCookie(name, '', -1)
}
/**
* 浏览器是否支持本地cookie
*/
function isSupportLocalCookie () {
let {name, value} = {name: 'name', value: 'mingze'}
setCookie(name, value, 1) //设置cookie
return getCookie(name).includes(value) //includes 判断数组name中是否含有当前value(返回true or false)
}
/**
* 设置cookie值
*
* @param {String} name cookie名称
* @param {String} value cookie值
* @param {Number} expiredays 过期时间,天数
*/
function setCookie (name, value, expiredays) {
let exdate = new Date()
//setDate获取N天后的日期
exdate.setDate(exdate.getDate() + expiredays) //getDate() 获取当前月份的日 + 过期天数
document.cookie =name+"="+encodeURI(value)+";path=/;expires="+exdate.toLocaleString()
}
/**
* 获取cookie值
* @param {String} name cookie名称
*/
function getCookie (name) {
var arr = document.cookie.split(";") //转换数组
//["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
for(var i=0;i
var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
if(arr2[0].trim() == name){
return arr2[1]
}
}
}
/**
* 删除指定cookie值
* @param {String} name cookie名称
*/
function clearCookie (name) {
setCookie(name, '', -1)
}
/**
* 浏览器是否支持本地cookie
*/
function isSupportLocalCookie () {
let {name, value} = {name: 'name', value: 'mingze'}
setCookie(name, value, 1) //设置cookie
return getCookie(name).includes(value) //includes 判断数组name中是否含有当前value(返回true or false)
}
好了了解了cookie我们开始如何实现一个简单的记住密码功能HTML代码
ref="ruleForm"
label-position="left"
label-width="0px"
class="demo-ruleForm login-page">
系统登录
v-model="ruleForm2.username"
auto-complete="off"
placeholder="用户名"
>
v-model="ruleForm2.password"
auto-complete="off"
placeholder="密码"
>
ref="ruleForm"
label-position="left"
label-width="0px"
class="demo-ruleForm login-page">
系统登录
v-model="ruleForm2.username"
auto-complete="off"
placeholder="用户名"
>
v-model="ruleForm2.password"
auto-complete="off"
placeholder="密码"
>
vue代码
data(){
return {
logining: false,
checked: true
ruleForm: {
username: '',
password: '',
},
rules: {
username: [{required: true, message: '请输入您的帐户', trigger: 'blur'}],
password: [{required: true, message: '请输入您的密码', trigger: 'blur'}]
},
}
},
mounted() {
this.account() //获取cookie的方法
},
account(){
if(document.cookie.length <= 0){
console.log(this.getCookie('mobile'))
this.ruleForm.username = this.getCookie('mobile')
this.ruleForm.password = this.getCookie('password')
}
},
setCookie(c_name,c_pwd,exdate){ //账号,密码 ,过期的天数
var exdate = new Date()
console.log(c_name,c_pwd)
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //保存的天数
document.cookie ="mobile="+c_name+";path=/;expires="+exdate.toLocaleString()
document.cookie ="password="+c_pwd+";path=/;expires="+exdate.toLocaleString()
},
getCookie(name){
var arr = document.cookie.split(";")
//["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
for(var i=0;i
var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
if(arr2[0].trim() == name){
return arr2[1]
}
}
},
clearCookie(){
this.setCookie("","",-1) //清除cookie
},
handleSubmit(){ //提交登录
this.$refs.ruleForm.validate((valid) => {
if(valid){
this.logining = true;
var _this = this;
if(_this.checked == true){
//存入cookie
_this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7) //保存7天
}else{
_this.clearCookie();
}
Login({
mobile:_this.ruleForm.username,
password:_this.ruleForm.password
}).then((result) => {
console.log(result)
_this.$alert('登陆成功')
})
}
}
data(){
return {
logining: false,
checked: true
ruleForm: {
username: '',
password: '',
},
rules: {
username: [{required: true, message: '请输入您的帐户', trigger: 'blur'}],
password: [{required: true, message: '请输入您的密码', trigger: 'blur'}]
},
}
},
mounted() {
this.account() //获取cookie的方法
},
account(){
if(document.cookie.length <= 0){
console.log(this.getCookie('mobile'))
this.ruleForm.username = this.getCookie('mobile')
this.ruleForm.password = this.getCookie('password')
}
},
setCookie(c_name,c_pwd,exdate){ //账号,密码 ,过期的天数
var exdate = new Date()
console.log(c_name,c_pwd)
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdate) //保存的天数
document.cookie ="mobile="+c_name+";path=/;expires="+exdate.toLocaleString()
document.cookie ="password="+c_pwd+";path=/;expires="+exdate.toLocaleString()
},
getCookie(name){
var arr = document.cookie.split(";")
//["_ga=GA1.1.1756734561.1561034020", " mobile=123" password=456"]
for(var i=0;i
var arr2 = arr[i].split('='); // ["_ga", "GA1.1.1756734561.1561034020"]
if(arr2[0].trim() == name){
return arr2[1]
}
}
},
clearCookie(){
this.setCookie("","",-1) //清除cookie
},
handleSubmit(){ //提交登录
this.$refs.ruleForm.validate((valid) => {
if(valid){
this.logining = true;
var _this = this;
if(_this.checked == true){
//存入cookie
_this.setCookie(_this.ruleForm.username,_this.ruleForm.password,7) //保存7天
}else{
_this.clearCookie();
}
Login({
mobile:_this.ruleForm.username,
password:_this.ruleForm.password
}).then((result) => {
console.log(result)
_this.$alert('登陆成功')
})
}
}
好了,这回的记住密码就到这里,小伙伴们一起努力吧 ^ 0 ^总结总结
相关文章:
- js区分vue-router的hash和history模式js大全
- jsVue使用路由钩子拦截器beforeEach和afterEach监听路由js大全
- JavaScriptjs通过canvas生成图片缩略图
- js如何利用JS将手机号中间四位变成*号js大全
- js如何手写简易的 Vue Routerjs大全
- JavaScriptjs禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
- js如何手写一个简易的 Vuexjs大全
- jsvue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决js大全
- js代码JavaScript检测是否开启了控制台(F12调试工具)
- jsJS sort排序详细使用方法示例解析js大全