Chrome 扩展程序/JavaScript - 将数据保存到 Chrome 同步未正确存储答案

【问题标题】：Chrome Extension/JavaScript - Saving data to Chrome Sync not storing correctlyChrome 扩展程序/JavaScript - 将数据保存到 Chrome 同步未正确存储
【发布时间】：2018-07-03 12:17:29
【问题描述】：

简介

我正在为 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>

预期输出到控制台（选中复选框时单击 Save All 按钮）：

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

到控制台的实际输出（选中复选框时单击 Save All 按钮）：

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

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

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

问题

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

【问题讨论】：

标签： javascript jquery google-chrome google-chrome-extension local-storage

【解决方案1】：

在这一行：

settings[n] = getVal(n);

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

您可以尝试以下两种方法之一：

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

var settings = [];

为

var settings = {};

2) 使用例如push 将键：值对添加到settings 数组，例如：

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

【讨论】：