以下是谷歌浏览器插件与本地存储通信策略：
1. 使用 chrome.storage API
- 存储数据：通过 `chrome.storage.local` 或 `chrome.storage.sync` 来存储数据。例如，在 Chrome 扩展的背景脚本（background script）中，可以使用如下代码将数据存储到本地存储中：
javascript
// 以 key 为 "username" 为例，存储用户名
chrome.storage.local.set({ username: "John Doe" }, function() {
console.log("Data saved");
});
- 读取数据：使用相应的 `chrome.storage.local.get` 或 `chrome.storage.sync.get` 方法读取数据。比如：
javascript
// 读取之前存储的用户名
chrome.storage.local.get(['username'], function(result) {
console.log(result.username); // 输出 "John Doe"
});
- 监听数据变化：可以利用 `chrome.storage.onChanged` 事件来监听本地存储中数据的变化，以便在数据被修改时及时做出响应。例如：
javascript
chrome.storage.onChanged.addListener(function(changes, namespace) {
if (namespace === 'local') {
// 处理 local storage 中的数据变化
console.log('local storage changed:', changes);
} else if (namespace === 'sync') {
// 处理 sync storage 中的数据变化
console.log('sync storage changed:', changes);
}
});

2. 使用 IndexedDB
- 打开数据库连接：首先需要打开与 IndexedDB 数据库的连接，指定数据库名称和版本号。例如：
javascript
const request = indexedDB.open('my-database', 1);
request.onsuccess = function(event) {
const db = event.target.result;
// 数据库打开成功，可以在这里进行数据操作
};
- 创建对象商店（Object Store）：如果数据库中不存在所需的对象商店，可以在 `onupgradeneeded` 事件中创建。比如：
javascript
request.onupgradeneeded = function(event) {
const db = event.target.result;
if (!db.objectStoreNames.contains('users')) {
const objectStore = db.createObjectStore('users', { keyPath: 'id' });
// 可以在这里设置对象商店的其他参数，如索引等
}
};
- 添加数据：通过事务（transaction）向对象商店中添加数据。例如：
javascript
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
const user = { id: 1, name: 'John Doe', email: 'johndoe@example.com' };
objectStore.add(user);
transaction.oncomplete = function() {
console.log('Data added to IndexedDB');
};
transaction.onerror = function(event) {
console.error('Error adding data to IndexedDB:', event.target.error);
};
};
- 读取数据：使用 `get` 方法根据主键（key）读取数据，或者使用 `openCursor` 方法遍历对象商店中的数据。例如：
javascript
// 根据主键读取数据
const request = indexedDB.open('my-database', 1);
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['users'], 'readonly');
const objectStore = transaction.objectStore('users');
const key = 1; // 要读取的数据的主键
const getRequest = objectStore.get(key);
getRequest.onsuccess = function(event) {
console.log('Data read from IndexedDB:', event.target.result);
};
getRequest.onerror = function(event) {
console.error('Error reading data from IndexedDB:', event.target.error);
};
};
- 更新数据：通过 `put` 方法更新已有的数据。例如：
javascript
const request = indexedDB.open('my-database', 1);
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
const user = { id: 1, name: 'Jane Doe', email: 'janedoe@example.com' }; // 更新后的数据
objectStore.put(user);
transaction.oncomplete = function() {
console.log('Data updated in IndexedDB');
};
transaction.onerror = function(event) {
console.error('Error updating data in IndexedDB:', event.target.error);
};
};
- 删除数据：使用 `delete` 方法删除指定的数据。例如：
javascript
const request = indexedDB.open('my-database', 1);
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['users'], 'readwrite');
const objectStore = transaction.objectStore('users');
const key = 1; // 要删除的数据的主键
objectStore.delete(key);
transaction.oncomplete = function() {
console.log('Data deleted from IndexedDB');
};
transaction.onerror = function(event) {
console.error('Error deleting data from IndexedDB:', event.target.error);
};
};