打开和关闭扩展时保留表单数据？

Question

我正在为 Google Chrome 开发一个扩展程序，用户可以通过它填写表单。

工作原理：

1. 用户点击扩展图标，会出现一个带有表单的弹出窗口；
2. 开始填写表格；
3. 结束填充；
4. 发送表单；

5. 结束。

    

问题：

1. 用户点击扩展图标，会出现一个带有表单的弹出窗口；
2. 开始填写表格；
3. 用户无意中点击了扩展图标或在弹出窗口之外点击；
4. 分机关闭；
5. 用户再次打开；
6. 已经填写的数据丢失了；
7. 扩展变得不可行；

8. 结束。

   我需要知道如何不丢失这些数据，但我什至不知道如何谷歌它。你能帮帮我吗？

Answer 1

简而言之，这是如何做到的：

1. 每次输入更改时，将其保存到持久存储中
2. 在弹出加载时，加载保存的数据
3. 成功完成表单后，清除保存的数据

Chrome 扩展中有不同的持久存储选项，但最“原生”的是chrome.storage API。您可以在in the docs 和这里找到示例。

这包括加载和保存数据，但是如何捕捉输入变化？好吧，有一个有用的 oninput 表单字段事件。

所以基本思路：

var keys = [/* a list of your fields' ids as keys */];

document.addEventListener("DOMContentLoaded", function() {
  chrome.storage.local.get(keys, function(data) {
    /* find the form fields and set their state from data, for example 
       (depends on the field type - maybe not .value) */
    for (let key of keys) {
      let field = document.getElementById(key);
      field.value = data[key];
      field.oninput = saveData;
    }
  });
})

function saveData(e) {
  chrome.storage.local.set({[this.id]: this.value});
}

function clearData() { // To be called when you submit your data
  chrome.storage.local.remove(keys);
}

这是一个非常粗略的草稿；尝试从那里得到这个想法并加以调整。