Chrome扩展程序/ JavaScript-无法正确将数据保存到Chrome Sync

Question

简要

我正在为Chrome扩展程序创建一个“选项”页面。 我有多个字段，但是我无法存储数据供以后检索，因为它一直存储着一个空数组（而不是我要它存储的内容）。

码

 //On load $(function() { $("#saveBtn").click(saveAll); }); //Function to save all data function saveAll() { var settings = []; //Go through all inputs with [data-input-settings] attribute $("[data-input-settings]:not(.ignore)").each(function(e) { var $t = $(this); var n = $t.attr("data-input-settings"); //Add this setting key and value to settings array settings[n] = getVal(n); }); //Save to storage chrome.storage.sync.set({ "settings": settings }, function() { console.log(settings); console.log("Saved"); //Output to check (development environment) chrome.storage.sync.get("settings", function(o) { console.log(o.settings); }); }); } //Function to retrieve value by field name function getVal(field){ return $("[data-input-settings='"+field+"']").val() || false; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="settings-advanced"> <label><input type="checkbox" data-input-settings="adv-debug">Enable debug mode</label> <button type="submit" id="saveBtn">Save All</button></div> </div> 

预期输出到控制台 （选中复选框时，在“全部保存”按钮上单击）：

[adv-debug: "on"]
Saved
[adv-debug: "on"]

控制台的实际输出 （选中复选框时，在“全部保存”按钮上单击）：

[adv-debug: "on"]
Saved
[]

在任何阶段调用以下函数时，控制台的输出均为“ [] ”（即使在页面加载时调用）：

 function retrieveAll() { chrome.storage.sync.get("settings", function(o) { console.log(o.settings); }); } 

题

为什么未将settings数组保存到Chrome同步存储中，需要进行哪些更改才能使其正常工作？

Answer 1

在这一行：

settings[n] = getVal(n);

由于n是字符串而不是数字，因此您要向数组settings中添加属性，而不是为其添加值。 请记住，数组也是对象。 完成该操作后， settings仍然是具有另一个属性的零长度数组（在您的情况下是avd-debug: "on" ）。

您可以尝试以下两项操作之一：

1）将settings声明为对象而不是数组。 即改变

var settings = [];

对于

var settings = {};

2）使用例如push将key：value对添加到settings数组，例如：

settings.push({[n]:getVal(n)});