localstorage에서 select 드롭 다운 값을 설정하고 변경하지 않는 한 기본값을 값으로 설정하는 방법은 무엇입니까?

여기 내가하려는 일이 있습니다.localstorage에서 select 드롭 다운 값을 설정하고 변경하지 않는 한 기본값을 값으로 설정하는 방법은 무엇입니까?

우선 Chrome 확장 프로그램입니다. 그 이후 지금

function mySelectValue() { 
    // Add an event listener for the value 
    document.getElementById('mySelectValue').addEventListener('change', function() { 
     // Get the value of the name field. 
     var mySelectValue = document.getElementById('mySelectValue').value; 

     // Save the name in localStorage. 
     localStorage.setItem('mySelectValue', mySelectValue); 
    }); 
}

내가 값을 검색하는 코드를 가지고 : popup.html에서 실행되는 파일, popup.js에서는
(이 코드는 내가 선택 옵션을 선택하면, 값을 설정하는 것입니다) 이제는 localstorage에 저장해야합니다 :

function getAndDisplayTheValue() { 
    myValue = localStorage.getItem('mySelectValue'); 
    document.write(myValue); 
}

좋습니다. 자바 스크립트 파일입니다.

  <select id="mySelectValue"> 
       <option name="" value="">choose a value</option> 
        <option value="first" name="first">first value</option> 
        <option value="second" name="second">second value</option> 
        <option value="third" name="third">third value</option> 
      </select>

좋아, 그래서 내가하고 싶은 것입니다 : 예 first value에 대한

내가 값을 선택, 내가 원하는 이제 여기에 popup.html 파일입니다 그것은 로컬 스토리지에 저장됩니다. 이제 로컬 저장소에 first 값이 저장되었습니다. 내가 어떤 결정하면 내가 그것을 원하지 않으며 second value로 변경하지 않았다
, 다음은 로컬 스토리지를 덮어 쓰기해야하며, 현재 로컬 스토리지에 second 지금이 저장되어있는 값이어야합니다.
다음에 대신되는 기본 값 (이 경우 popup.html에서) 페이지를 열 choose a value (빈 이름과 값) 대신 기본 값은 당신이 second value을 선택하기 때문에 그래서 로컬 스토리지에서 가져온해야 before, now second value이 기본값이어야합니다.

출처

2013-10-04 Accelerator

나는 그것을 스스로 알아 냈습니다.

기본적으로 로컬 저장소에 값을 저장하고 첫 번째 옵션에는 값이 표시되지 않습니다. 그런 다음 첫 번째 옵션의 텍스트 대신 공백으로 남겨두고 localstorage 및 document.write의 값을 사용하는 자바 스크립트를 첫 번째 옵션 상자에 텍스트로 출력합니다.

명백한 문제는 처음에는 비어 있습니다. 따라서이 문제를 해결하기 위해 null인지 확인하고 값이 null 인 경우 (아직 localstorage에 설정된 값이 없음) 다음 값을 자동으로 설정합니다.

값을 인쇄하는 대신 사용할 수있는 값을 확인하고 그 값이 localstorage에 저장된 값이면 각 주어진 값에 대해 원하는 텍스트를 인쇄하는 것이 었습니다. 작업 jsbin 예를

체크 아웃 : http://jsbin.com/ELOKEJU/1
페이지를 옵션 C를 말할 값을 변경 한 다음 새로 고침 경우가 나타납니다, 그 옵션 C는 이제 기본 값입니다.

또한 페이지 재로드 후에 옵션 C가 표시된다는 사실은 localstorage에 성공적으로 저장된다는 것을 의미합니다. 그렇지 않으면 null 값에서 옵션 A를 표시하지 않으므로 localstorage에 성공적으로 저장됩니다. 즉, 다른 위치에서 localstorage 값을 사용하여 다른 기능을 수행 할 수 있습니다. 여기

그것을 수행하는 방법입니다 :

if (localStorage.getItem('mySelectLocalstorageValue') === null) { 
       localStorage.setItem('mySelectLocalstorageValue', "a"); 
       document.write("Option A"); 
      } 
      else { 
       if (localStorage.getItem('mySelectLocalstorageValue') === "a") { 
        document.write("Option A"); 
       } else if (localStorage.getItem('mySelectLocalstorageValue') === "b") { 
        document.write("Option B"); 
       } else if (localStorage.getItem('mySelectLocalstorageValue') === "c") { 
        document.write("Option C"); 
       } else if (localStorage.getItem('mySelectLocalstorageValue') === "d") { 
        document.write("Option D"); 
       } else if (localStorage.getItem('mySelectLocalstorageValue') === "e") { 
        document.write("Option E"); 
       } 
      }

JS/background.js을

page.html

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="js/background.js"></script> </head> <body> <select id="myDynamicSelectBox"> <option value=""><script type="text/javascript" src="js/theStoredValue.js"></script> </option> <option value="a">Option A</option> <option value="b">Option B</option> <option value="c">Option C</option> <option value="d">Option D</option> <option value="e">Option E</option> </select> </body> </html>

JS/theStoredValue.js

$(document).ready(function(){ $('#myDynamicSelectBox').change(function(){ localStorage.setItem('mySelectLocalstorageValue', $(this).val()); $('#myDynamicSelectBox').value(localStorage.getItem('mySelectLocalstorageValue')); }); });

p.s. 작업 예제에서는 직관적 인 ID와 로컬 저장소 이름을 사용하여 쉽게 이해할 수있었습니다. 이름을 원하는대로 변경할 수 있습니다.

솔루션을 즐기십시오. 나는 사람들이 실제로 미래의 질문에서 나를 도왔 으면 좋겠다.

출처

2013-10-15 14:18:01 Accelerator

localstorage에서 select 드롭 다운 값을 설정하고 변경하지 않는 한 기본값을 값으로 설정하는 방법은 무엇입니까?

답변

관련 문제