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

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。您可以在SO上找到样本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);
}

这是一个非常粗略的草案;试着从中获取想法并进行调整。