Chrome 存储本地示例 - JavaScript

在使用 JavaScript 编写网页应用程序时，我们通常需要使用本地存储来持久保存数据，以便之后使用。Chrome 浏览器提供了多种本地存储方式，本文将介绍其中两种：localStorage 和 chrome.storage。

localStorage

localStorage 是一个简单的键值对存储系统，可以将数据存储在用户的本地浏览器中。存储的数据是永久性的，即使关闭浏览器也不会被删除。以下是 localStorage 的使用示例：

// 存储数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

需要注意的是，localStorage 存储的数据会一直占用用户的本地存储空间，因此不应该滥用。此外，localStorage 只能存储字符串类型的数据，如果需要存储其他类型，需要先将其转换为字符串。

chrome.storage

chrome.storage 是一种更为通用的本地存储方式，可以存储任何类型的数据，包括数字、布尔值、对象、数组等等。和 localStorage 不同的是，chrome.storage 是异步存储，不会阻塞页面的加载。以下是 chrome.storage 的使用示例：

// 存储数据
chrome.storage.local.set({key: 'value'}, function() {
  console.log('保存成功');
});

// 获取数据
chrome.storage.local.get(['key'], function(result) {
  const value = result.key;
  console.log(value);
});

// 删除数据
chrome.storage.local.remove(['key'], function() {
  console.log('删除成功');
});

需要注意的是，在使用 chrome.storage 时需要先获取一个指向 chrome.storage.local 的对象。此外，chrome.storage 还有一些高级用法，例如可以监听数据的变化、指定存储区域等等，详见官方文档。

结语

本文简单介绍了 Chrome 浏览器中的本地存储方式：localStorage 和 chrome.storage。它们分别适用于不同的场景，可以大大方便开发者的应用程序开发。