## current position：Home>Element form account password

2022-04-29 05:17:27

One 、el-input After remembering the password, the account and password , Changed the background color

First look at bug picture （ The background is set to transparent color , But after remembering the password, the account and password will automatically add the background color ）：

terms of settlement ：

  .el-input {

input {

text-indent: 5px;
background: transparent;
border: none;
border: 0px;
-webkit-appearance: none;
color: #333;
border-bottom: 1px solid rgb(235, 237, 242); &:-webkit-autofill {

box-shadow: 0 0 0px 1000px #fff inset !important;  // here #fff It's set up with me input Same color as box
-webkit-text-fill-color: #333 !important;  // Here is the text box font color
}
}
}


A perfect solution , The effect is as shown in the picture ：

Two 、el-input The input box browser will automatically fill in the account and password questions

Originally, my page does not need to automatically fill in the account password , However, even if I set the account password to blank or log in and then exit the account, the password will be automatically filled in , I've been wondering about this for a long time , Just find out later auto-complete="new-password" Attribute is enough , Pictured ：

If the account password is what we expect to remember , Can be set up auto-complete=“off”, But when we switch to the registration page or new account page , It will still automatically fill in the account and password ,auto-complete It can be set according to specific conditions .

3、 ... and 、 Realize the operation of remembering account and password

Here are three ways to store account passwords ：

1、sessionStorage( Not recommended )

• Valid only in current session , It is cleared after closing the browser window
• The size of stored data is generally 5MB
• No interactive communication with the server

2、 localStorage

• Unless you take the initiative to remove localStorage Information in , Otherwise it will exist forever , The next time you start the browser, the window will be closed
• The size of stored data is generally 5MB
• No interactive communication with the server

• You can manually set the expiration time , Beyond the validity period, it will become invalid . Expiration time is not set , It is cleared after closing the browser window
• The size of stored data is generally 4K
• Every request is sent to the server

Here I use the second method to remember the password localStorage, Pictured ：

1、 Password encryption , To improve security , The password needs to be encrypted before storage . I used it here base64, The download version is 2.5.1.

// install js-base64
npm install --save js-base64


export default {

data() {

return {

},
checked: false,
};
},
mounted() {

this.checked = true;
}
},
methods: {

if (valid) {

if (this.checked) {

} else {

}
}
});
},
},
};



The effect is as shown in the picture （ The password is encrypted ）：

There are questions about form login that I don't understand , Comments are welcome , I will reply to you as soon as possible , Our goal is ： Help each other , Common progress ！！！