chrome.storage.sync 的替代方案，可以在密钥中存储超过 8kb

Question

我构建了一个 chrome 扩展，它从弹出表单中获取信息，以某种方式格式化，然后吐出那张“卡片”。请看下面的图片。

https://i.stack.imgur.com/PkDU0.png

当它吐出单独的“卡片”时，它会将包含所有卡片的 div 的 innerHTML 保存到存储中。当程序加载时，它从存储中取出该项目并根据保存的内容更改 div 的 innerHTML。这样，当我刷新或退出并返回时，卡片不会消失。

但是，我运行遇到了一些问题，因为我打算在多台计算机上使用该程序，但我不希望一台计算机上的卡与另一台计算机上的卡不同。

我的目标：能够在多台计算机上保存两个字符串（可能很大，远远超过 8kb）。

我尝试过的：

我已经尝试使用 local.storage 和 chrome。local.storage 但每个都不提供跨多台计算机使用的功能。
我试过使用 chrome.sync，这表明成功的可能性最大，但失败了，因为密钥有严格的 8kb 配额，而我的密钥远大于 8kb，因为它们保存了整个 div.
正在研究一种将字符串存储在 google 驱动器之类的方法中。我发现了一些 API，我认为它们确实相似，但已被弃用。
正在寻找一种外部方式来存储数据，但我相信它们都需要花钱。

代码：

function setOnLocalStorage(){
    chrome.storage.sync.set({'template': document.getElementById('cards').innerHTML})
    chrome.storage.sync.set({'groupTemplate': document.getElementById('listContainer').innerHTML})

chrome.storage.sync.get('template', function(data){   
    var z = data
    document.getElementById('cards').innerHTML = [Object.values(z)[0]]
    })

chrome.storage.sync.get('groupTemplate', function(data){   
    var y = data
    document.getElementById('listContainer').innerHTML = [Object.values(y)[0]]
    })

其他信息：如果有帮助，每张卡片都是单独的 divs。我在每张卡片上都有删除和复制功能，可通过更改的上下文菜单使用。

Answer 1

如果要存储的值略高于 8 Kb，您可以使用压缩内容 (zip) 的 js 库。您还可以实施定制例程，将值拆分为小于 8kb 的键，并在需要检索原始值时连接这些键。
您可以将这两种方法合并在一起，或者...
...您可以使用 supabase 或 firebase 服务。

chrome.storage.sync 的替代方案，可以在密钥中存储超过 8kb

Alternative to chrome.storage.sync that can store more than 8kb in a key

html

javascript

google-chrome-extension