如何在本地存储 Chrome 扩展的编辑数据

在开发 Chrome 扩展时，我们常常需要存储一些用户编辑的数据，以便在下次使用时可以快速恢复。本文将介绍如何在本地存储 Chrome 扩展的编辑数据。

Chrome 扩展的存储选项

Chrome 扩展提供了3种存储选项：

• Local Storage：本地存储，保存在用户本地。
• Sync Storage：同步存储，保存在用户的 Google 账户中，可以在不同设备间同步。
• Managed Storage：管理存储，由系统管理员设置，普通用户不能修改。

下面我们将重点介绍 Local Storage 的使用方法。

Local Storage 的使用方法

存储数据

使用 Local Storage 存储数据很简单，只需要使用 chrome.storage.local.set 函数即可。例如，下面的代码存储一个键值对：

chrome.storage.local.set({'key': 'value'}, function() {
  console.log('Value is set to ' + value);
});

读取数据

使用 Local Storage 读取数据也很简单，只需要使用 chrome.storage.local.get 函数即可。例如，下面的代码读取一个键的值：

chrome.storage.local.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

删除数据

删除数据也很简单，只需要使用 chrome.storage.local.remove 函数即可。例如，下面的代码删除一个键值对：

chrome.storage.local.remove(['key'], function(result) {
  console.log('Value is removed');
});

实战演练

下面我们来实际演练一下如何使用 Local Storage 存储 Chrome 扩展的编辑数据。

1. 创建一个新的 Chrome 扩展

首先，我们需要创建一个新的 Chrome 扩展。可以参考官方文档 Getting started。

2. 创建一个 Options 页面

我们创建一个 Options 页面，用户可以在这个页面编辑数据。可以参考官方文档 options_ui。

在 Options 页面中，我们可以使用上面介绍的 Local Storage 存储用户编辑的数据。

// 存储数据
document.addEventListener('input', function() {
  var data = document.querySelector('#data').value;
  chrome.storage.local.set({'data': data});
});

// 读取数据，并显示在页面上
chrome.storage.local.get(['data'], function(result) {
  document.querySelector('#data').value = result.data;
});

3. 测试

在 Chrome 浏览器中加载我们创建的扩展，并访问 Options 页面，我们可以看到保存和读取数据的功能已经正常工作了。

结论

在 Chrome 扩展中使用 Local Storage 存储编辑数据非常方便，只需要几行代码就可以实现。但需要注意的是，由于 Local Storage 是保存在用户本地，因此用户可以清除数据或者清除浏览器缓存。如果需要确保数据的不丢失，可以考虑使用 Sync Storage 或者服务端存储。