Chrome扩展：Chrome Sync无法正确存储设置数据的问题排查

你遇到的问题核心在于错误地使用数组（[]）来存储键值对类型的设置。Chrome Storage 使用 JSON 序列化来存储数据，而 JSON 规范里的数组只能是数字索引的有序集合——你给数组添加的自定义键名（比如adv-debug）在序列化过程中会被直接忽略，最终存储的就是一个空数组。

修复步骤 #

1. 将settings从数组改为普通对象 #

把初始化settings的代码从数组改成对象：

// 原代码
var settings = [];
// 修改为
var settings = {};

2. 调整后的完整saveAll函数 #

修改后的逻辑基本无需变动，只需要把数组换成对象即可：

function saveAll() {
 var settings = {}; // 这里改成对象
 // 遍历输入项的逻辑不变
 $("[data-input-settings]:not(.ignore)").each(function(e) {
 var $t = $(this);
 var n = $t.attr("data-input-settings");
 settings[n] = getVal(n);
 });
 // 保存与验证逻辑不变
 chrome.storage.sync.set({ "settings": settings }, function() {
 console.log(settings);
 console.log("Saved");
 chrome.storage.sync.get("settings", function(o) {
 console.log(o.settings);
 });
 });
}

3. 优化复选框的值获取（可选但推荐） #

当前getVal函数对复选框返回的是val()（默认是"on"），如果希望存储更符合逻辑的布尔值，可以修改getVal函数：

function getVal(field){
 var $elem = $("[data-input-settings='"+field+"']");
 // 针对复选框/单选框单独处理
 if ($elem.is(':checkbox, :radio')) {
 return $elem.prop('checked');
 }
 return $elem.val() || false;
}

验证修改效果 #

勾选复选框点击保存后，控制台会输出：

{adv-debug: true} // 如果用了布尔值优化，否则是"on"
Saved
{adv-debug: true}

调用retrieveAll函数也能正确获取到存储的设置对象。

为什么数组不行？ #

Chrome Storage 依赖JSON.stringify()来序列化数据，当你给数组添加非数字索引的属性时，JSON 序列化会完全忽略这些属性——因为在 JSON 标准中，数组只能包含按顺序排列的元素，不能有自定义键。你看到的[adv-debug: "on"]只是浏览器控制台对“带额外属性的数组”的特殊显示，实际序列化后这些属性都会丢失，最终存储的就是空数组[]。

内容的提问来源于stack exchange，提问作者Ben