拡張機能を開いたり閉じたりするときにフォームデータを保持しますか？

Question

Google Chromeの拡張機能を開発しています。ここでユーザーはこれを使ってフォームに記入します。

仕組み：

1. ユーザーは、拡張機能のアイコンをクリックすると、ポップアップフォームが表示されます。
2. フォームの入力を開始します。
3. 充填終了;
4. フォームを送信します。

5. 終了。

問題：

1. ユーザーは、拡張機能のアイコンをクリックするとポップアップフォームが表示されます。
2. フォームの入力を開始します。
3. ユーザーが、拡張機能アイコンを誤ってクリックするか、ポップアップから外します。
4. 延長が終了します。
5. ユーザーが再び開きます。
6. すでに入力されたデータは失われました。
7. 拡張機能は実行できなくなります。

8. 終了。

   私はこのデータをどのように失わないかを知る必要がありますが、私はGoogleにその方法を知らない。手伝って頂けますか？一言で言えば

Answer 1

、ここでは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); 
} 

。アイデアを得てそこから適応させてください。