私はする必要がなくなり、アカウントのパスワードに直接表示されますとき、私たちはQQを果たしてきたと信じていますが、保存機能、パスワードを見つけた場合は、保存のアカウントのパスワードを選択する際に、注意してください、そして次回ので、あなたはログオン再び、我々は時間を入力し、そのような機能は、それを達成する方法ですが、私は今、単にこの機能を見て皆のためにクッキーを通じて実現しています。
まず第一には、次の3つの機能のクッキーパッケージを共有します：
//设置cookie
//ops指用来处理有效时间以及路径
function setCookie(key,val,ops){
ops = ops || {};
let e = "";
if(ops.expires){
var d = new Date();
d.setDate( d.getDate() + ops.expires );
e = ";expires="+d;
}
let p = ops.path ? ";path="+ops.path : "";
document.cookie = `${key}=${val}${p}${e}`;
}
//获取cookie
function getCookie(key){
let strC = document.cookie;
let arrC = strC.split("; ");
for(var i=0;i<arrC.length;i++){
if(arrC[i].split("=")[0] === key){
return arrC[i].split("=")[1];
}
}
return "";
}
//删除cookie
function removeCookie(key,ops){
ops = ops || {};
ops.expires = -1;
setCookie(key,"qweqwezzdasd",ops);
}
ここでは、我々の場合のプットを始めます。
まず、結果の最初のページに簡単なログイン画面を行います
<body>
<div class="box">
账号：<input type="text" name="" id="admin" value="" /><br />
密码：<input type="text" name="" id="password" value="" /><br />
<input type="checkbox" name="remember" id="remember" value="" />
<label for = "remember">点击保留信息7天</label>
<input type="button" name="btn" id="btn" value="模拟登陆" />
</div>
</body>
レンダリング：
その後の効果を達成するために私たちのJSを使用しています。
分析：
1.まず、我々は、2つのテキストボックスの値を取得する必要があります
チェックボックスが、選択された場合、私たちはクッキーによって作成されたデータ保持する必要があるかどうかを判断2.
データがテキストボックスに表示を許可3.各リフレッシュを実現するためには、元のアカウントとパスワードが存在しています。
class admin{
// 1.构造函数
constructor(){
this.adm = document.getElementById("admin");
this.pas= document.getElementById("password");
this.rem = document.getElementById("remember");
this.btn = document.getElementById("btn");
}
// 2.当点击登陆后对在文本框中的信息进行获取(事件)
addEvent(){
var that = this;
this.btn.onclick = function(){
that.adm2 = that.adm.value;
that.pas2 = that.pas.value;
that.isSetCookie();
}
}
// 3.判断是否选中复选框，如有对数据进行创建cookie保存
isSetCookie(){
// 判断是否选中
if(this.rem.checked){
// 将信息打包
let msg = {
adm : this.adm2,
pas : this.pas2
}
// 有效期为7天(因为cookie只可以存字符，所以要把msg用josn的字符存储)
setCookie("admin",JSON.stringify(msg),{
expires:7
})
}
}
// 4.将cookie存储的信息解析,显示在文本框中
getUser(){
// 为了能通过属性获取到值,把字符改成对象格式
// 初始获取cookie时，如果没有存过，拿到空字符，JSON不能转换
// 所以，要做默认处理，默认对象中要提前设置user和pass属性，放置将来将undefined放在输入框内
let msg = getCookie("admin") ? JSON.parse(getCookie("admin")) : {adm:"",pas:""};
this.adm.value = msg.adm;
this.pas.value = msg.pas;
}
}
var t = new admin();
t.addEvent();
t.getUser();
レンダリング：
あなたは、アカウントパスワードのチェックボックスを入力してボタンをクリックすると、ページを再入力するときので、アカウントのパスワードの効果を達成することができますを示して、情報をクッキーで保存されている見つけることができます。
コード：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
账号：<input type="text" name="" id="admin" value="" /><br />
密码：<input type="text" name="" id="password" value="" /><br />
<input type="checkbox" name="remember" id="remember" value="" />
<label for = "remember">点击保留信息7天</label>
<input type="button" name="btn" id="btn" value="模拟登陆" />
</div>
</body>
<script src="public/public.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
class admin{
// 1.构造函数
constructor(){
this.adm = document.getElementById("admin");
this.pas= document.getElementById("password");
this.rem = document.getElementById("remember");
this.btn = document.getElementById("btn");
}
// 2.当点击登陆后对在文本框中的信息进行获取(事件)
addEvent(){
var that = this;
this.btn.onclick = function(){
that.adm2 = that.adm.value;
that.pas2 = that.pas.value;
that.isSetCookie();
}
}
// 3.判断是否选中复选框，如有对数据进行创建cookie保存
isSetCookie(){
// 判断是否选中
if(this.rem.checked){
// 将信息打包
let msg = {
adm : this.adm2,
pas : this.pas2
}
// 有效期为7天(因为cookie只可以存字符，所以要把msg用josn的字符存储)
setCookie("admin",JSON.stringify(msg),{
expires:7
})
}
}
// 4.将cookie存储的信息解析,显示在文本框中
getUser(){
// 为了能通过属性获取到值,把字符改成对象格式
// 初始获取cookie时，如果没有存过，拿到空字符，JSON不能转换
// 所以，要做默认处理，默认对象中要提前设置user和pass属性，防止将来将undefined放在输入框内
let msg = getCookie("admin") ? JSON.parse(getCookie("admin")) : {adm:"",pas:""};
this.adm.value = msg.adm;
this.pas.value = msg.pas;
}
}
var t = new admin();
t.addEvent();
t.getUser();
</script>
</html>
