[TIL] LocalStorage에 Selected Value 저장하기

1. 선택된 옵션에서 Value 구하기

💡 선택된 Option의 Value를 구하는 코드 :
select.options[select.selectedIndex].value

HTML

<select class = "select>
	<option value = ""> --- 선택하세요 --- </option>
	<option value = "1"> 사과 </option>
	<option value = "2"> 포도 </option>
	<option value = "3"> 망고 </option>
</select>        

Javascript

const select = document.querySelector(".select");
const currentValue = select.options[select.selectedIndex].value;

여기서는 select에 class를 지정해서 js로 불러왔지만 select를 하나만 생성할 경우 select 태그 자체를 사용해서 불러와도 무방하다.

2. LocalStorage 저장 및 불러오기

2-1. Save selected value in localStorage

💡 save elements in localStorage :
localStorage.setItem(key, value)

Javascript

const select = document.querySelector(".select");
const currentValue = select.options[select.selectedIndex].value;

localStorage.setItem(fruits, currentValue);

2-2. Load value from localStorage

💡 get elements from localStorage :
localStorage.getItem(key)

💡 set value into select box :
select.value = value

Javascript

// 위와 중복되는 코드 생략, 필요한 코드만 작성

function load (){
  const currentFruits = localStorage.getItem(fruits);
  if ( currentFruits === null ){
      // EventListener and Save value
  } else {
      select.value = currentFruits;
      /* selectbox value에 현재 로컬스토리지에 저장된 값을 할당해
      유저가 이전에 선택한 옵션을 selectbox에 바로 노출시킴 */
  }
}