<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>storage.html</title>
<link href="css/mystyle1.css" rel="stylesheet" />
</head>
<body>
<div class="container6">
<h3>저장소</h3>
<input type="text" id="userid" placeholder="아이디" /><br />
<input type="password" id="userpw" placeholder="암호" /><br />
<input type="checkbox" id="chk" /> 아이디/암호 저장<br />
<input type="button" id="btn" value="로그인" /><br />
</div>
</body>
<script>
const userid = document.getElementById('userid');
const userpw = document.getElementById('userpw');
const chk = document.getElementById('chk');
const btn = document.getElementById('btn');
// 아이디/암호저장이 체크돼있다면, 창을 켰을 때 저장된 아이디 암호 그대로
// 따로 뭔 짓을 하는게 아니라서 이벤트 필요없음
if(localStorage.getItem("CHK") === "1"){ // '==' 값만 같으면 됨, '===' 값과 타입이 같아야 함
userid.value = localStorage.getItem("UID");
userpw.value = localStorage.getItem("UPW");
chk.checked = localStorage.getItem("CHK");
}
chk.addEventListener('change', () => { // '() =>' = 'function ()'
if(chk.checked === true) {
/* localStorage.setItem("키값", 실제데이터) 키값은 임의로
chrome -> F12 - Application - Storage - Local Storage
Local - 창을 닫아도 소멸X, Session - 창 닫으면 소멸 */
localStorage.setItem("UID", userid.value);
localStorage.setItem("UPW", userpw.value);
localStorage.setItem("CHK", 1);
// 숫자로 넣었지만 저장소 들어갈 때는 문자(string)로 들어감
}
else {
localStorage.removeItem("UID");
localStorage.removeItem("UPW");
localStorage.removeItem("CHK");
}
});
</script>
</html>
20211208-