0

これが私がやろうとしていることです。

まず、これは Chrome 拡張機能にあります。
ファイル内で、popup.html で実行される popup.js (このコードは、選択オプションを選択したときに値を設定するためのものです):

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);
    });
}

その後、ローカルストレージに保存する必要がある値を取得するコードができました。

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

さて、それがjavascriptファイルです。popup.html ファイルは次のとおりです。

            <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>

わかりましたので、私がやりたいことは次のとおりです。

  1. たとえばfirst value、値を選択すると、ローカル ストレージに格納されます。これで localstorage に value が保存されましたfirst。
  2. 私がそれを望んでいないと判断してに変更したsecond value場合、ローカルストレージを上書きする必要があり、現在ローカルストレージにsecond保存されている値になるはずです。
  3. 次にページ (この場合は popup.html) を開くと、デフォルト値choose a value(名前と値が空) ではなく、ローカルストレージからデフォルト値を取得する必要があるため、second value以前に選択したため、現在second valueはデフォルト値になります。 .
4

3 に答える 3

6

私は自分でそれを理解しました。

基本的に、ローカル ストレージに値を保存し、最初のオプションの値は表示しません。次に、最初のオプションのテキストの代わりに、空白のままにして、その場所に localstorage の値を使用する JavaScript をdocument.write入力し、最初のオプション ボックスに値をテキストとして出力します。

さて、明らかな問題は、最初は空白になることです。そのため、これに取り組んだ方法は、null であるかどうかを確認し、値が null である場合 (localstorage にまだ値が設定されていない場合) を自動的に設定することでした。価値。

さらに、値だけを出力する代わりに、使用可能な値をそれぞれチェックし、その値が localstorage に保存されているものである場合、与えられた値ごとに必要なテキストを出力しました。

実際の jsbin の例を確認してください: http://jsbin.com/ELOKEJU/1
値をオプション C に変更し、ページを更新すると、オプション C がデフォルト値になっていることがわかります。

さらに、ページのリロード後にオプション C が表示されているということは、localstorage に正常に保存されていることを意味します。これは、他の場所でその localstorage 値を使用して、他の機能を実行できることを意味します。

方法は次のとおりです。

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

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

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

ps 実際の例では、簡単に理解できるように直感的な id と localstorage 名を使用しました。好きな名前に自由に変更してください。

ソリューションをお楽しみください。将来の質問で人々が実際に私を助けてくれることを願っています。

于 2013-10-15T14:18:01.423 に答える