Question

简

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

代码

＆＃13;

//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;
}

＆＃13;

<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>

＆＃13;

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

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

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

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

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

＆＃13;

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

＆＃13;

问题

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

Answer 1

在这一行：

settings[n] = getVal(n);

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

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

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

var settings = [];

的

var settings = {};

2）使用例如settings向push数组添加键：值对，如：

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

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

1 个答案: