[javascript] LocalStorage에 select option 값 저장하기

 

 

 

select에서 option 값 선택하기

 

 

 

 

html

 <select class="select">
      <option value="">--- Choose Your Country ---</option>
      <option value="KR">Korea</option>
      <option value="GRE">Greece</option>
      <option value="TUR">Turkey</option>
      <option value="FIN">Finland</option>
    </select>

 

js

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

 

 

 

 

1. select에 클래스를 만들어 querySelector로 불러온다.

 

2. option들엔 각각의 인덱스가 있는데, 선택된 인덱스의 option의 value를 currentValue에 저장한다.

 

 

---

 

 

LocalStorage에 저장하기

 

localStorage.setItem(key, value)

 

const COUNTRY_LS="Country";

localStorage.setItem(COUNTRY_LS,currentValue);

 

 

 

키와 value를 각각 localStorage에 저장한다.

 

 

 

 

---

 

 

LocalStorage에 저장된 value를 가져오기

 

 

localStorage.getItem(key)

 

const lsValue=localStorage.getItem(COUNTRY_LS);

 

 

 

 

 

---

 

선택했던 selected option 유지 시키기

 

select.value = (로컬스토리지에서 가져온 value)

 

function loadValue(){
    const lsValue=localStorage.getItem(COUNTRY_LS);
    if(lsValue!==null){
    select.value=lsValue;
    }
}

 

 

가져온 value가 null이 아니라면 select value에 value를 할당한다.

이러면 페이지를 새로고침 해도 유저가 선택한 value가 여전히 그대로 selectbox에 보여진다.

 

 

 

 

 

 

 

 

---