问题描述
最近俺在接触 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;
}
