【Chrome插件】如何在Chrome插件开发中处理复杂数据结构的存储

最近俺在接触 Chrome 插件开发，需要把一个数据存放到浏览器的存储中。这个数据结构有点复杂，它包含一个 Map 和一个数组。我使用 chrome.storage.local API来存储这个数据，然后在另一个地方获取数据。保存数据的代码并没有报错，但是俺发现获取的时候获取结果的内容为空，这是为什么呢？

下面是我封装的保存数据和获取数据的方法：

// 要存储的数据结构
const mindDataObj = {keywordMap: new Map(),mindDataArr: []
};/*** 获取存储对象* @param {string} key 存储对象的键* @returns {Promise<Object>} 返回一个包含存储对象的 Promise*/
export async function getObject(key) {return new Promise((resolve, reject) => {chrome.storage.local.get([key], (result) => {if (chrome.runtime.lastError) {return reject(chrome.runtime.lastError)}resolve(result[key] || {})})})
}/*** 保存存储对象* @param {string} key 存储对象的键* @param {Object} obj 要保存的对象* @returns {Promise<void>} 返回一个 Promise，表示操作完成*/
export async function saveObject(key, obj) {return new Promise((resolve, reject) => {chrome.storage.local.set({ [key]: obj }, () => {if (chrome.runtime.lastError) {return reject(chrome.runtime.lastError)}resolve()})})
}

为什么会这样？

经过查找资料发现，chrome.storage.local 的存储机制只能存储和检索序列化的 JSON 对象，虽然JSON可以很好地处理对象和数组，但对于Map、Set等ES6中引入的复杂数据结构，JSON是无法直接序列化和反序列化的。因此，尽管你可能没有在保存数据时遇到错误，但在尝试读取非JSON兼容类型的数据时，这些数据将因无法被正确序列化而丢失。

解决方案

总之一句话：chrome.storage.local 只能存储 JSON 兼容的数据类型（如对象、数组、字符串、数字等），Map 和 Set 需要转换为对象或数组才能正确存储。在这里，我们通过 chrome.storage.local 存储时需要先进行序列化处理，而在读取时需要进行反序列化处理。

步骤1: 序列化和反序列化Map对象

我们先增加两个方法做序列化的处理，serializeMap 和 deserializeMap 方法用于将 Map 对象转换为数组，从而可以存储在 chrome.storage.local 中，并在读取时将其转换回 Map 对象。

/*** 序列化Map对象* @param {Map} map 要序列化的Map对象* @returns {Object} 序列化后的对象*/
function serializeMap(map) {return Array.from(map.entries());
}/*** 反序列化Map对象* @param {Array} entries 序列化后的对象* @returns {Map} 反序列化后的Map对象*/
function deserializeMap(entries) {return new Map(entries);
}

步骤2: 存储和读取数据

然后再增加操作数据的方法，saveMindData 和 getMindData 方法用于保存和获取 mindDataObj 格式的数据，包括序列化和反序列化步骤。

/*** 保存mindDataObj格式的数据* @param {string} key 存储对象的键* @param {Object} initMindDataObj 要保存的对象* @returns {Promise<void>} 返回一个 Promise，表示操作完成*/
export async function saveMindData(key, mindDataObj) {const serializedData = {keywordMap: serializeMap(mindDataObj.keywordMap),mindDataArr: mindDataObj.mindDataArr};await saveObject(key, serializedData);
}/*** 获取mindDataObj格式的数据* @param {string} key 存储对象的键* @returns {Promise<Object>} 返回一个包含mindDataObj格式数据的 Promise*/
export async function getMindData(key) {const serializedData = await getObject(key);const mindDataObj = {keywordMap: deserializeMap(serializedData.keywordMap || []),mindDataArr: serializedData.mindDataArr || []};return mindDataObj;
}