728x90
반응형
이건 예전에 했던 거
자바스크립트
const form = document.querySelector(".js-form"),
select = form.querySelector(".selectBox");
const USER_LS = "counrty";
//3.currentValue에 저장된 select 벨류값을 로컬스토리지에 저장
function saveCountry(select) {
localStorage.setItem(USER_LS, select);
}
function handleSubmit(event) {
//1.일단 이벤트를 멈추고
event.preventDefault();
//2.현재 가지고 있는 벨류값 저장
//const currentValue = select.value;
const currentValue = select.options[select.selectedIndex].value;
saveCountry(currentValue);
}
function selectOne() {
form.addEventListener("change", handleSubmit);
}
function loadCountry() {
const myPick = localStorage.getItem(USER_LS);
console.log("mypick:" + myPick);
if (myPick === null) {
selectOne();
} else {
}
}
function init() {
loadCountry();
}
init();
HTML
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Where are you from?</h1>
<form class="js-form">
<select class="selectBox">
<option value="ASK">--- Choose Your Country ---</option>
<option value="KR">Korea</option>
<option value="GR">Greece</option>
<option value="TK">Turkey</option>
<option value="FI">Finland</option>
</select>
</form>
<script src="src/index.js"></script>
</body>
</html>
728x90
반응형
'Coding With Jina > JavaScript' 카테고리의 다른 글
| [자바스크립트] select를 이용하여 로컬스토리지에 저장하기 (0) | 2021.01.17 |
|---|---|
| [자바스크립트] value의 값이 변경 되었을 때 발생하는 이벤트 - change (0) | 2021.01.17 |
| [자바스크립트] 로컬 스토리지(LocalStorage) / 세션 스토리지(SessionStorage) (0) | 2021.01.16 |
| [자바스크립트] 크리스마스까지 남은 시간 계산하기 (1) | 2021.01.16 |
| [자바스크립트] classList.add/remove/contains / toggle (0) | 2021.01.14 |