以

Question

在options.html中，我有一个输入，用户可以在其中输入其API密钥，例如

<label>
Input your API Key
<input type="text" id="wptk">
</label>

在options.js中有一段代码，就像使用

一样，将其保存到存储中

function save_options() {
  var api = document.getElementById('wptk').value;
    chrome.storage.sync.set({
    savedApi: api,
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'OK! API Key saved!';
    setTimeout(function() {
      status.textContent = '';
    }, 10000);
  });
}

document.getElementById('save').addEventListener('click', save_options);
document.getElementById('wptk').value = api

一切正常，没问题。但是，尽管如此，键还是保存了，如果用户两次查看选项，则表单（输入）为空。

在保存后如何始终在表单中显示字符串？

Answer 1

您需要从存储中获取保存的savedApi值并将其设置为字段值。参见下面的示例代码。

function restore_options() {  
    chrome.storage.sync.get({"savedApi": ''}, function(items) {
      document.getElementById('wptk').value = items.savedApi;
    });
}
document.addEventListener('DOMContentLoaded', restore_options);