可存储单键超8KB数据的chrome.storage.sync跨设备存储替代方案咨询

方案1：拆分存储使用chrome.storage.sync（无第三方依赖，零成本） #

chrome.storage.sync除单键8KB限制外，总配额为100KB，只要你的两个HTML字符串总压缩后不超过100KB，该方案完全可用，无需对接任何第三方服务。

实现步骤 #

• 第一步：引入轻量压缩库LZ-string（最小化后仅几KB，不影响扩展体积），对原始HTML字符串做压缩，可减少60%以上的体积
• 第二步：将压缩后的字符串按每块7KB拆分（预留冗余避免触碰8KB单键限制），按规则命名存储键，同时存储元数据（总块数、原始字符串长度）
• 第三步：读取时先取元数据，再按索引读取所有块，合并后解压恢复原始内容

代码实现（替换原有逻辑） #

// 块大小设置为7KB，预留冗余
const CHUNK_SIZE = 7 * 1024;
// 压缩工具，需提前引入lz-string库
import LZString from 'lz-string';

// 存储大字符串到sync存储
async function saveBigString(keyPrefix, rawStr) {
  // 先压缩内容
  const compressed = LZString.compressToUTF16(rawStr);
  const totalChunks = Math.ceil(compressed.length / CHUNK_SIZE);
  // 存储元数据
  await chrome.storage.sync.set({
    [`${keyPrefix}_meta`]: {
      totalChunks,
      length: compressed.length
    }
  });
  // 分块写入存储
  const savePromises = [];
  for (let i = 0; i < totalChunks; i++) {
    const chunk = compressed.slice(i * CHUNK_SIZE, (i + 1) * CHUNK_SIZE);
    savePromises.push(chrome.storage.sync.set({ [`${keyPrefix}_chunk_${i}`]: chunk }));
  }
  await Promise.all(savePromises);
}

// 从sync存储读取大字符串
async function getBigString(keyPrefix) {
  // 读取元数据
  const metaRes = await chrome.storage.sync.get(`${keyPrefix}_meta`);
  const meta = metaRes[`${keyPrefix}_meta`];
  if (!meta) return '';
  // 批量读取所有块
  const chunkKeys = Array.from({length: meta.totalChunks}, (_, i) => `${keyPrefix}_chunk_${i}`);
  const chunksRes = await chrome.storage.sync.get(chunkKeys);
  // 合并解压返回
  const compressed = chunkKeys.map(key => chunksRes[key]).join('');
  return LZString.decompressFromUTF16(compressed);
}

// 替换原有存储逻辑
async function setOnStorageSync() {
  await saveBigString('template', document.getElementById('cards').innerHTML);
  await saveBigString('groupTemplate', document.getElementById('listContainer').innerHTML);
}

// 替换原有读取逻辑
async function loadFromStorageSync() {
  const template = await getBigString('template');
  if (template) document.getElementById('cards').innerHTML = template;
  const groupTemplate = await getBigString('groupTemplate');
  if (groupTemplate) document.getElementById('listContainer').innerHTML = groupTemplate;
}

优化建议 #

• 直接存储HTML体积较大，你可以把每个卡片的内容抽成结构化JSON存储，只存卡片的文本、样式参数等数据，读取时再动态渲染成DOM，体积可减少70%以上，同步效率更高
• 如果总数据量超过chrome.storage.sync的100KB总配额，可以使用Chrome扩展自带的chrome.identityAPI对接Google Drive v3 API，个人使用的免费配额完全足够，不需要付费

内容的提问来源于stack exchange，提问作者Justin Black