同步存储与本地存储及配额
选择合适的 Chrome 存储区域，理解配额限制，并可靠地处理存储变化事件。
同步存储与本地存储及配额 是 CoddyKit 上的免费 Browser Extensions Development (Chrome & Edge) 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Browser Extensions Development (Chrome & Edge) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Browser Extensions Development (Chrome & Edge) 课程共包含 4 节课。
两个主要的存储区域
Chrome 存储接口提供了多个区域。您最常使用的两个区域是 storage.local 和 storage.sync。
- local — 保存在此设备上，配额较大
- sync — 在用户已登录的各个浏览器之间同步，配额较小
何时使用 sync
对于希望用户在所有设备上都能使用的偏好设置（例如主题或设置），请使用 storage.sync。请保持数据量较小。
chrome.storage.sync.set({ theme: 'dark', fontSize: 14 })何时使用 local
对于较大的数据或特定设备上的数据（例如缓存、日志或无需同步的下载内容），请使用 storage.local。
chrome.storage.local.set({ cache: bigObject })同步配额限制
storage.sync 的容量有意设置得较小。大致来说：总容量约为 100 KB，每项约为 8 KB，并且每分钟可写入的次数有限。
超出这些限制会引发错误，因此请合理规划数据结构。
// Stay well under ~8 KB per key for sync本地配额限制
storage.local 允许存储更多数据，默认通常约为 10 MB，而 unlimitedStorage 权限可以提高这一上限。不过，仍应避免存储巨大的数据块。
{
"permissions": ["storage", "unlimitedStorage"]
}读回数据
两个区域都使用 get 读取数据。您可以传入一个键、一个键数组或一个默认值对象。
const data = await chrome.storage.sync.get({ theme: 'light' })
console.log(data.theme)监听变化
每当存储的值发生变化时，onChanged 事件都会触发，即使变化来自其他上下文。请使用它让用户界面保持同步。
chrome.storage.onChanged.addListener((changes, area) => {
if (area === 'sync' && changes.theme) {
console.log('New theme: ' + changes.theme.newValue)
}
})移除和清空
使用 remove 删除指定的键，或使用 clear 清空整个区域。
chrome.storage.local.remove('cache')
chrome.storage.sync.clear()检查已使用的字节数
在写入更多数据之前，使用 getBytesInUse 查看距离配额上限还有多远。
const used = await chrome.storage.sync.getBytesInUse()
console.log(used + ' bytes used')处理写入失败
同步写入可能因配额错误而失败。请将写入操作放在 try/catch 中，并在同步存储已满时回退到本地存储。
try {
await chrome.storage.sync.set({ big: value })
} catch (e) {
await chrome.storage.local.set({ big: value })
}明智地选择
一种常见做法是：将小型设置保存在 sync 中，将其他所有内容保存在 local 中。切勿将令牌等机密信息以明文存储，因为扩展程序存储并未加密。
快速检查
测试您对存储的理解。
回顾
您已经比较了不同的存储区域：
- 使用
sync保存跨设备的小型设置 - 使用
local保存较大的设备数据 - 遵守配额限制并检查
getBytesInUse - 响应
onChanged - 处理写入失败，并避免存储机密信息
选择合适的区域可以让您的数据保持快速、持久，并处于限制范围内。
用 AI 导师学习 JavaScript — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 12
- 课程
- 48
常见问题解答
「同步存储与本地存储及配额」课时是免费的吗？
是的 — 「同步存储与本地存储及配额」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Browser Extensions Development (Chrome & Edge) 课程的其余内容，请升级到 CoddyKit PRO。 Browser Extensions Development (Chrome & Edge) 课程共包含 4 节课。
「同步存储与本地存储及配额」这节课中我会学到什么？
选择合适的 Chrome 存储区域，理解配额限制，并可靠地处理存储变化事件。 你通过在浏览器中直接运行的动手代码来练习 Browser Extensions Development (Chrome & Edge)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Browser Extensions Development (Chrome & Edge) 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Browser Extensions Development (Chrome & Edge) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「同步存储与本地存储及配额」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Browser Extensions Development (Chrome & Edge) 课中编写并运行代码吗？
能。每节 Browser Extensions Development (Chrome & Edge) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 单向消息传递模式
- 组件之间的双向消息传递
- 使用 Chrome Storage API
- 同步存储与本地存储及配额