在Chrome上保存和还原设置

Question

我有options.html

<html>
<head>
<meta charset="utf-8">
<title>Options</title>
<script src="js/options.js"></script>
</head>
<body>
<p>
  <input type="checkbox" name="checkbox" id="checkbox">
  <label for="checkbox">Test</label></p>
<p>
  <label for="textfield">Filter:</label>
  <input type="text" name="textfield" id="textfield">
</p>
<p>Select type:</p>
<p>
  <label>
    <input type="radio" name="RadioGroup1" value="True" id="RadioGroup1_0">
  Radio</label>
  <br>
  <label>
    <input type="radio" name="RadioGroup1" value="False" id="RadioGroup1_1">
    Radio</label>
</p>
<p>
<button id="BtnSave">Save</button>
<button id="BtnRestore">Restore</button>
  <br>
</p>
</body>
</html>

options.js

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("BtnSave").addEventListener("click", ButtonSave);
    document.getElementById("BtnRestore").addEventListener("click", ButtonsRestore);
});

function ButtonSave() {
    var ... = document.getElementById('...').checked;
    chrome.storage.sync.set({...: ...}, function() {
    });
}

function ButtonsRestore() {
    chrome.storage.sync.get(likesColor, function (retVal) {
    });
}

如何保存： 复选框状态，“ 编辑”中的值和RadioGroup ItemIndex？

如何还原： CheckBox （选中：= True）， Edit （文本：='bla-bla'）和RadioGroup （ItemIndex：= 1）？

谢谢！

Answer 1

复选框和单选按钮的“ checked”属性将使您查看是否已选中它们：

console.log(document.getElementById(id).checked)

您也可以使用它来以编程方式设置它们，例如

document.getElementById(id).checked = true

对于文本框，其当前值在value属性中：

console.log(document.getElementById(id).value)

同样可以设置：

document.getElementById(id).value = "whatever"

Answer 2

解决了

function save_options() {
  var elements = document.getElementsByName('RadioGroup1');
  for (i = 0; i < elements.length; i++) {
    if (elements[i].checked) {
      localStorage.setItem("RadioGroup1", elements[i].value);
      break;
    }
  }
}

function restore_options() {
  var elements = document.getElementsByName('RadioGroup1');
  var num = localStorage.getItem("RadioGroup1");
  elements[num].checked = true;
}

在Chrome上保存和还原设置

问题描述

2 个解决方案

解决方案1
1 2015-03-10 21:14:07

解决方案2
0 2015-03-11 14:44:18

在Chrome上保存和还原设置

问题描述

2 个解决方案

解决方案1 1 2015-03-10 21:14:07

解决方案2 0 2015-03-11 14:44:18

解决方案1
1 2015-03-10 21:14:07

解决方案2
0 2015-03-11 14:44:18