如何在 Chrome 应用程序中存储地图对象？答案

【问题标题】：How can I store a Map object in a Chrome App?如何在 Chrome 应用程序中存储地图对象？
【发布时间】：2015-07-24 07:59:57
【问题描述】：

使用 Chrome API chrome.storage.local，我可以保存并成功检索数组，但无法检索 Map 对象。

var folders = new Map()
//... populate Map
chrome.storage.local.set( { "myFolders": folders } )

chrome.storage.local.get( "myFolders", function ( saved ) 
{
  console.assert( typeof saved.myFolders.size === 'number', "not a Map!" )
} )

我不得不在存储之前将 Map 转换为数组。我可以直接存储 Map 对象吗？

【问题讨论】：

只有 OWL 才能回答这个问题

标签： javascript google-chrome-extension google-chrome-app

【解决方案1】：

不，您不能存储或通过消息传递不可序列化 JSON 的对象（DOM 节点是另一个常见的例子）。

Map 不是：

> JSON.stringify(new Map().set("a", "b"))
"{}"

因此，您只能存储 JSON can encode 的内容。这意味着您必须在存储访问之上进行自己的序列化/反序列化。

编辑：正如 Simon 的回答所示，Chrome 执行比 JSON 更精细的序列化（保留 RegExp 和 Date），但原则仍然存在：非原始对象需要自定义序列化。

【讨论】：

序列化实际上比 JSON 差。通常，Date 对象通过Date.prototype.toJSON 进行序列化，但使用存储 API，这些自定义序列化程序不会被调用。日期对象（和 RegExp）序列化为无用的 {} 值（crbug.com/380964）。

【解决方案2】：

好吧，检查documentation：

原始值（例如数字）将按预期进行序列化。价值观使用 typeof "object" 和 "function" 通常会序列化为 {}，除了 Array（按预期序列化）、Date 和 Regex （使用它们的字符串表示进行序列化）。

所以你不能在不转换数据的情况下直接这样做。

【讨论】：

【解决方案3】：

您不能 JSON.stringify 地图，因此它不能按预期开箱即用。但是，问题是“如何”，所以这里是：

var folders = new Map()
//... populate Map

// save
chrome.storage.local.set(
  { "myFolders": Object.fromEntries(folders) }
)

// load
chrome.storage.local.get( "myFolders",
  function(saved){
    folders = new Map(Object.entries(result.myFolders));
    console.log(folders);
  }
)

请记住 API 是异步的，因此 folders 将在 chrome.storage.local.get 调用结束后加载。

【讨论】：