一个网站做多少关键词,建程网土石方工程,东营网站设计,最好的网站建设报价最近俺在接触 Chrome 插件开发#xff0c;需要把一个数据存放到浏览器的存储中。这个数据结构有点复杂#xff0c;它包含一个 Map 和一个数组。我使用 chrome.storage.local API来存储这个数据#xff0c;然后在另一个地方获取数据。保存数据的代码并没有报错#xff0c;但… 最近俺在接触 Chrome 插件开发需要把一个数据存放到浏览器的存储中。这个数据结构有点复杂它包含一个 Map 和一个数组。我使用 chrome.storage.local API来存储这个数据然后在另一个地方获取数据。保存数据的代码并没有报错但是俺发现获取的时候获取结果的内容为空这是为什么呢 下面是我封装的保存数据和获取数据的方法
// 要存储的数据结构
const mindDataObj {keywordMap: new Map(),mindDataArr: []
};/*** 获取存储对象* param {string} key 存储对象的键* returns {PromiseObject} 返回一个包含存储对象的 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 {Promisevoid} 返回一个 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 {Promisevoid} 返回一个 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 {PromiseObject} 返回一个包含mindDataObj格式数据的 Promise*/
export async function getMindData(key) {const serializedData await getObject(key);const mindDataObj {keywordMap: deserializeMap(serializedData.keywordMap || []),mindDataArr: serializedData.mindDataArr || []};return mindDataObj;
}
