VueBloghyhero6

localStorage和chome.storage.local.set

2025-11-17 / 2025-11-17 / 40次浏览
浏览器插件中总会涉及到密码和私钥的存储位置,

所以详解一下这俩个的差异

一句话概念:
chrome.storage.local 更像是 插件专用的小数据库(异步、有配额治理),
localStorage 则是 普通网页用的同步小字典,不适合扩展里当长期、可靠存储主力。

chrome.storage.local.set({ [key]: encrypted })
localStorage.setItem(key, value)

chrome.storage.local
这是 Chrome 扩展(Extension)专用的存储 API;
特点:
异步:不会阻塞 JS 主线程(对性能、UI 流畅度友好)。
有回调 / Promise(MV3 也可以用 chrome.storage.local.set(...).then(...))。
数据是 JSON 可序列化 的东西(对象会被序列化存起来)。

和 localStorage 对比:核心差异点
作用域 / 隔离程度不同
localStorage
按 域名(origin)隔离:https://a.com 和 https://b.com 的不互通。
网页、content script、甚至同一 origin 下的多个页面可以共享。

chrome.storage.local
按 扩展 ID 隔离:每个扩展自己的空间,网页访问不到。
扩展的 background、popup、options、content script 都可以访问同一份数据(通过消息 / 直接调用)。

👉 对于扩展来说,chrome.storage.local 是“插件自己的专属存储空间”,安全性、隔离性更好。

操作
chrome.storage.local.set({ key: value }, () => {
  // 写入完成后的回调
});

chrome.storage.local.get(['key'], (result) => {
  console.log(result.key);
});

容量与配额(quota)

大概情况(数字不是精确上限,只是方向性对比):

localStorage
通常按域名限制,大约几 MB 级别(5MB 左右,不同浏览器略有差异)。
超了会直接抛异常或失败。

chrome.storage.local
总大小可以比 localStorage 大不少(比如几十 MB 级别,具体看官方文档和平台限制)。
有 写入频率限制:
比如:每分钟最大写入次数 / 修改的数据量限制等(Chrome 有 Storage API 的 quota)。
如果你在 for 循环里狂 set,可能触发配额(chrome.runtime.lastError 里会有提示)。

实际开发建议:
批量写入:把一批键打包在一次 set 调用里;
避免高频、粒度过细的写操作。

实际开发钱包中用作私钥和密码存储位置。