로컬 스토리지 새로 고침 후 드롭 다운 선택 복원

Question

옵션 태그 값을 로컬 스토리지에 저장하려고합니다. 로컬 저장소에 값을 저장 한 후 사용자가 선택한 옵션에 options 태그를 설정할 수 있기를 원합니다. 나는 후속편을 시도했지만 값을 저장할 수만 있습니다. 선택 태그를 사용자가 선택한 값으로 변경하는 데 문제가 있습니다.

<select name="fruit" id="fruit"> 
    <option value="1">Apple</option> 
    <option value="2">Guava</option> 
    <option value="3">Mango</option> 
    <option value="4">Grapes</option> 
</select> 

document.getElementById("fruit").onchange = function() { 
localStorage.setItem('fruit', document.getElementById("fruit").value); 
} 

if (localStorage.getItem('fruit') === "Guava") { 
document.getElementById("fruit").setAttribute('Selected', 'Guava'); 
} 

Answer 1

당신의 옵션 값이 정수이기 때문에,이 경우, 나는이 옵션이 아닌 옵션 요소의 텍스트 내용의 값에 대해 확인한다.

DEMO

HTML : 여기

은 증가 수치 옵션 값이있는 경우 0에서 시작하여 작동하는 솔루션입니다

<select name="fruit" id="fruit"> 
    <option value="0">Apple</option> 
    <option value="1">Guava</option> 
    <option value="2">Mango</option> 
    <option value="3">Grapes</option> 
</select> 

그리고 당신의 JS는 다음과 같습니다

document.getElementById("fruit").onchange = function() { 
    localStorage.setItem('fruit', document.getElementById("fruit").value); 
} 

if (localStorage.getItem('fruit')) { 
    document.getElementById("fruit").options[localStorage.getItem('fruit')].selected = true; 
}​ 

Answer 2

저장하고있는 것처럼 보입니다. 값을 로컬 저장소에 저장했으나 비교하려면 텍스트을 사용하려고했습니다. 어쩌면 내가 당신의 응용 프로그램이 어떻게 작동하는지 오해하고 있습니다. 어쨌든

,이 조각은 당신의 값은 (구아바 열매)가 제대로 선택을하셔야합니다 :

$("#fruit option[value='2']").attr("selected","selected"); 

당신이 옵션의 텍스트 (구아바)가 옵션 태그를 설정해야하는 경우 :

$("#fruit option").each(function(){ 
    if ($(this).text() == "Guava") 
    $(this).attr("selected","selected"); 
}); 

Answer 3

선택 옵션에 따라 값과 텍스트가 다르기 때문입니다. 시도 :

<select name="fruit" id="fruit"> 
    <option value="Apple">Apple</option> 
    <option value="Guava">Guava</option> 
    <option value="Mango">Mango</option> 
    <option value="Grapes">Grapes</option> 
</select> 

    document.getElementById("fruit").onchange = function() { 
    localStorage['fruit'] = document.getElementById("fruit").value; 
    } 
    window.onload= function(){ 
     if(localStorage['fruit']) 
      document.getElementById("fruit").value = localStorage['fruit']; 
    }