electron中如何使用electron-store在主进程和渲染进程中共享数据

一.安装electron-store

npm install electron-store

二.在主进程main.js中使用electron-store

先引入electron-store模块，我试了一下，直接用require('electron-store')会报错，所以需要用import动态加载

// 动态加载 electron-store
let store;
(async () => {
const Store = (await import('electron-store')).default;
store = new Store();
})();

主进程中如何操作数据?

存储数据
你可以使用 set 方法来存储数据。set 方法接受两个参数：键和值。

// 存储一个字符串
store.set('name', 'Electron');

// 存储一个对象
store.set('user', { name: 'John', age: 30 });

// 存储一个数组
store.set('tags', ['electron', 'javascript', 'nodejs']);

获取数据
你可以使用 get 方法来获取存储的数据。get 方法接受一个键作为参数，并返回对应的值。

// 获取存储的字符串
const name = store.get('name');
console.log(name); // 输出: Electron

// 获取存储的对象
const user = store.get('user');
console.log(user); // 输出: { name: 'John', age: 30 }

// 获取存储的数组
const tags = store.get('tags');
console.log(tags); // 输出: ['electron', 'javascript', 'nodejs']

删除数据
你可以使用 delete 方法来删除存储的数据。delete 方法接受一个键作为参数。

// 删除存储的字符串
store.delete('name');

// 删除存储的对象
store.delete('user');

// 删除存储的数组
store.delete('tags');

清空存储
你可以使用 clear 方法来清空所有的存储数据。

// 清空所有存储的数据
store.clear();

检查键是否存在
你可以使用 has 方法来检查某个键是否存在于存储中。

// 检查键是否存在
const hasName = store.has('name');
console.log(hasName); // 输出: true 或 false

监听存储变化
你可以使用 onDidChange 方法来监听存储数据的变化。

store.onDidChange('name', (newValue, oldValue) => {
console.log(`Name changed from ${oldValue} to ${newValue}`);
});

配置 electron-store
你可以通过传递一个配置对象来配置 electron-store。例如，你可以指定存储文件的名称、默认值等。

const store = new Store({
name: 'settings', // 存储文件的名称
defaults: { // 默认值
theme: 'dark',
notifications: true
}
});

获取存储文件的路径
你可以使用 path 属性来获取存储文件的路径。

const storePath = store.path;
console.log(storePath); // 输出存储文件的路径

由于渲染进程不能直接使用node模块，我们需要在主进程中将electron-store的一些方法暴露给preload.js，再通过preload.js暴露给渲染进程。

// 在主进程中暴露这些方法
ipcMain.handle('electron-store-get', async (event, key) => {
return store.get(key);
});

ipcMain.handle('electron-store-set', async (event, key, value) => {
store.set(key, value);
});

ipcMain.handle('electron-store-delete', async (event, key) => {
store.delete(key);
});

ipcMain.handle('electron-store-clear', async () => {
store.clear();
});

ipcMain.handle('electron-store-has', async (event, key) => {
return store.has(key);
});

三.preload.js将electron-store的方法暴露给渲染进程

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 将 electron-store 的方法暴露给渲染进程
contextBridge.exposeInMainWorld('electronStore', {
get: (key) => ipcRenderer.invoke('electron-store-get', key),
set: (key, value) => ipcRenderer.invoke('electron-store-set', key, value),
delete: (key) => ipcRenderer.invoke('electron-store-delete', key),
clear: () => ipcRenderer.invoke('electron-store-clear'),
has: (key) => ipcRenderer.invoke('electron-store-has', key),
});

四.渲染进程中使用electron-store

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron Store使用案例</title>
</head>
<body>
<h1>Electron Store使用案例</h1>
<button id="get-data">获取数据</button>
<button id="set-data">设置数据</button>
<button id="delete-data">删除数据</button>
<button id="clear-data">清空数据</button>

<script>
// 渲染进程中访问 electron-store
document.getElementById('get-data').addEventListener('click', () => {
const name = window.electronStore.get('name');
});

document.getElementById('set-data').addEventListener('click', () => {
window.electronStore.set('name', 'Electron');
});

document.getElementById('delete-data').addEventListener('click', () => {
window.electronStore.delete('name');
});

document.getElementById('clear-data').addEventListener('click', () => {
window.electronStore.clear();
});
</script>
</body>
</html>

这样在主进程和渲染进程都可以使用electron-store来操作和共享数据了。

electron中如何使用electron-store在主进程和渲染进程中共享数据

发表评论取消回复

微信