728x90
반응형
블로그에 비슷한 내용을 계속 올리는 것 같지만 자꾸 이해가 되지 않아 비슷하게 계속 연습 중
HTML
<body>
<h4>가장 좋아하는 동물은?</h4>
<select>
<option value="dog">강아지</option>
<option value="cat">고양이</option>
<option value="bird">새</option>
<option value="tiger">호랑이</option>
<option value="rabbit">토끼</option>
</select>
<script src="index.js"></script>
</body>
자바스크립트
// 1) html에 있는 select와 연결
const userSelect = document.querySelector("select");
// 2) 로컬스토리지에 value 값이 존재하는지에 대한 함수부터 만든다
// 로컬스토리에 value값을 출력하는 것
function loadAnimal(){
// ① 로컬스토리지에 Key값 "animal"의 value값을 저장할 변수 selected를 만들고
const selected = localStorage.getItem("animal");
// ② selected 가 null이 아닌 경우에
if(selected !== null){
// ③ 선택한 옵션을 selected에 저장
userSelect.value = selected;
}
}
// 3) 로컬스토리지에 선택한 옵션을 저장하는 함수
function handleChange(){
// ① 로컬 스토리지에 key값과 value값을 저장하는 것
localStorage.setItem("animal", userSelect.value);
}
// 4) 옵션을 변경클릭했을때 로컬스토리지 저장도 다시 저장하게 하는 이벤트
userSelect.addEventListener("change", handleChange);
결과
728x90
반응형
'Coding With Jina > JavaScript' 카테고리의 다른 글
| [자바스크립트] 함수에서 여러개의 값을 리턴하고 싶을때 (0) | 2021.01.20 |
|---|---|
| [자바스크립트] 배열 요소를 추가하는 메서드 - push( ) (0) | 2021.01.18 |
| [자바스크립트] value의 값이 변경 되었을 때 발생하는 이벤트 - change (0) | 2021.01.17 |
| [자바스크립트] select를 이용해 저장한 value값 로컬스토리지 출력하기 (0) | 2021.01.16 |
| [자바스크립트] 로컬 스토리지(LocalStorage) / 세션 스토리지(SessionStorage) (0) | 2021.01.16 |