Question

我正在使用chrome扩展程序并且chrome.storage api存在问题。我想将一个数组保存到存储器中，存储数组，但不存储数组的值。所以array [x]总是'null'。代码如下所示：

var storage = chrome.storage.local;
bookmarks = new Array();

var newButton = document.createElement('input');
//... Button properys are getting set
bookmarks[bookmarks.length] = newButton; //tried it also with .push()
var obj = {};
obj['bookmarks'] = bookmarks;
storage.set(obj, function(){ console.log('bookmark saved'); });

重新启动扩展程序并通过以下方式获取存储空间：

storage.get(null, function(result){
    console.log('Storage: ', result);
    });

日志如下所示：

Storage:  
Object
bookmarks: Array[1]
0: null
length: 1
__proto__: Array[0]
__proto__: Object

有什么建议是错误的，为什么数组没有正确存储？

谢谢！

Answer 1

要在Chrome.storage中存储对象，该对象必须是可序列化的。您可以通过尝试JSON.stringify()来测试对象是否可序列化。如果您在控制台中尝试以下操作：

JSON.stringify(document.createElement('input'));

您会看到错误被抛出 - TypeError: Converting circular structure to JSON。这意味着该对象无法序列化，因为它包含对self的引用。

看到DOM元素无法序列化，因此无法存储，解决方案是创建一个新对象，向其添加所需的按钮属性，然后存储它：

bookmarks = new Array();
var newButton = document.createElement('input');
//... Button properties are getting set
var data = {
    prop: newButton.prop
};
bookmarks.push(data);
storage.set({ bookmarks: bookmarks });

Answer 2

newButton对象太复杂而无法存储。相反，您应该存储原始值。例如。如果您运行以下命令，则可以从storage.local中检索预期的{bookmarks:[{foo:"bar"}]}。

var storage = chrome.storage.local;
bookmarks = new Array();

bookmarks[bookmarks.length] = {foo:"bar"};
var obj = {};
obj['bookmarks'] = bookmarks;
storage.set(obj, function(){ console.log('bookmark saved'); });

Chrome.storage不会正确存储数组

2 个答案: