Local storage is being erased in chrome extension

2019-06-14 07:05发布

问题:

So I want to save the theme the user chooses, and accordingly I'm choosing the popup to show them. Every time I close my tab (after 3 times) or quit chrome, it forgets my choice.

My options.html

<html>
<head>
  <script src="options.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Raleway:400,300,200,100' rel='stylesheet' type='text/css'>
</head>
<body>
  <center>
    <label class="paylabel" for="cardtype">Theme:</label>
    <select id="cardtype" name="cards">
      <option value="selectcard">--- Please select ---</option>
      <option value="op1">Theme 1</option>
      <option value="op2">Theme 2</option>
    </select>
  </center>
  <br />
  <br />
  <br />
  <br />
  <h1 style="font-family:Raleway; font-weight:200; float:left">Theme 1</h1>
    <h1 style="font-family:Raleway; font-weight:200; float:Right">Theme 2</h1>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  <img src = "screen2.png"; alt="" style="float:left"/>

  <img src = "screen1.png"; alt="" style="float:right"/>
</body>
</html>

Options.js:

time=setInterval(function(){
  var ddl = document.getElementById("cardtype");
  var selectedValue = ddl.options[ddl.selectedIndex].value;
  localStorage["inputText"] = selectedValue;
  var myvar = localStorage["inputText"];
    if (myvar == "op2")
   {
     chrome.browserAction.setPopup({
             popup: 'popup.html'
         });
   }
   else{
     chrome.browserAction.setPopup({
             popup: 'popup2.html'
         });
   }
},1000);

Thanks.

回答1:

  1. Move <script src="options.js"></script> before the closing </body> tag so that the script code will execute only when the entire document is parsed and loaded.
  2. Instead of setInterval use a proper on-change listener.

var element = document.getElementById("cardtype");

element.value = localStorage.inputText || 'op1';

element.addEventListener("change", function(e) {
    var selectedValue = this.value;
    localStorage.inputText = selectedValue;
    chrome.browserAction.setPopup({
        popup: selectedValue == 'op1' ? 'popup.html' : 'popup2.html'
    });
});