iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0
Modern Web

從 0 到 1:30 篇文章帶你玩轉 Electron 與 React系列 第 18

本地存儲數據:使用 Electron Store

  • 分享至 

  • xImage
  •  

在開發桌面應用時,持久化存儲使用者的設定資料、應用狀態等數據是十分常見的需求。在 Electron 應用中,我們可以通過許多方式來實現本地數據的存儲,如使用文件系統、資料庫等。而 Electron Store 是一個輕量級、簡單易用的解決方案,專門用於管理 Electron 應用中的本地存儲。

Electron Store 提供了一個 key & value 對存儲的接口,它將數據保存到 JSON 文件中,這樣開發者可以輕鬆地讀取和保存應用的設定資料,並且不需要處理複雜的文件系統操作或資料庫設定。


Electron Store 的特點

  1. 簡單易用:Electron Store 使用類似於 localStorage 的 API,開發者只需幾行代碼即可輕鬆完成數據存儲操作。

  2. 數據持久化:所有數據都被存儲在 JSON 文件中,並且隨應用的多次打開和關閉都可以持續保持。

  3. 支持複雜數據結構:不僅僅是單純的 key & value 對,Electron Store 支持存儲 JavaScript 物件、陣列等複雜數據結構。

  4. 加密支持:對於敏感數據,Electron Store 支持使用加密功能來保護存儲的數據。

  5. 跨平台:Electron Store 可以無縫運行於 Windows、macOS 和 Linux 平台。


安裝 Electron Store

首先,通過 npm 安裝 electron-store

npm install electron-store

安裝完成後,你就可以在主程序或渲染程序中使用 Electron Store 來管理本地存儲數據。


基本使用

在應用中使用 Electron Store 十分簡單,以下是一個基本的範例,它展示了如何設置、讀取和刪除本地數據。

// 在主程序或渲染程序中引入 Electron Store
const Store = require('electron-store');
const store = new Store();

// 設置數據
store.set('user.name', 'John Doe');
store.set('user.age', 30);

// 讀取數據
console.log(store.get('user.name')); // 'John Doe'
console.log(store.get('user.age'));  // 30

// 刪除某個鍵
store.delete('user.age');

// 檢查某個鍵是否存在
console.log(store.has('user.age'));  // false

在這個範例中,我們使用了 set() 方法來存儲數據,get() 方法來讀取數據,delete() 方法來刪除數據,並且還使用 has() 方法來檢查某個鍵是否存在。

複雜數據結構的存儲

Electron Store 不僅支持簡單的 key & value 資料結構,也能處理複雜的數據結構,如物件和陣列:

// 設置物件
store.set('preferences', {
  theme: 'dark',
  notifications: true
});

// 設置陣列
store.set('todos', ['Buy milk', 'Write code', 'Read book']);

// 讀取物件和陣列
console.log(store.get('preferences.theme')); // 'dark'
console.log(store.get('todos'));  // ['Buy milk', 'Write code', 'Read book']

使用加密存儲敏感數據

如果應用需要存儲敏感資料(如密碼、API 金鑰等),你可以使用 Electron Store 的加密選項來保護數據:

// 使用加密設置
const secureStore = new Store({
  encryptionKey: 'supersecretkey123' // 請替換為你的密鑰
});

// 加密存儲
secureStore.set('password', 'myPassword123');
console.log(secureStore.get('password')); // 'myPassword123'

加密後的數據將被安全地存儲到本地文件中,只有使用正確的密鑰才能讀取數據。


自定義存儲位置

默認情況下,Electron Store 將數據存儲在應用的設定文件夾中(通常是使用者目錄中的 .config 文件夾)。但是,你也可以自定義存儲位置:

const customStore = new Store({
  cwd: '/path/to/custom/directory'
});

customStore.set('app.language', 'en');
console.log(customStore.get('app.language')); // 'en'

這樣,你可以將應用的數據存儲到自定義的路徑,這對於特定需求的應用非常有用。


數據遷移

如果你的應用在未來版本中需要對存儲數據進行結構上的調整或遷移,Electron Store 也提供了數據遷移的功能來處理這些場景:

const store = new Store({
  migrations: {
    '0.1.0': (store) => {
      // 將舊版數據中的 "username" 重新命名為 "user.name"
      const username = store.get('username');
      store.set('user.name', username);
      store.delete('username');
    }
  }
});

這樣在每次應用升級時,存儲數據都會根據版本進行相應的遷移和調整,確保應用能夠順利過渡到新版本。


使用 Electron Store 的實際場景

1. 使用者設定保存

應用通常需要允許使用者自定義界面、功能偏好等。這些設定資料可以通過 Electron Store 持久化,並在應用重啟後恢復:

// 保存使用者偏好
store.set('preferences', {
  theme: 'light',
  language: 'zh-TW'
});

// 在應用啟動時讀取偏好
const preferences = store.get('preferences');
console.log(preferences.theme);  // 'light'
console.log(preferences.language); // 'zh-TW'

2. 應用狀態保存

在一些應用中,保存應用的運行狀態(如視窗大小、位置、最近打開的文件等)是常見需求。Electron Store 可以輕鬆處理這些數據:

// 保存視窗狀態
const windowState = { width: 800, height: 600, x: 100, y: 100 };
store.set('windowState', windowState);

// 在應用啟動時讀取視窗狀態
const savedState = store.get('windowState');
console.log(savedState.width, savedState.height);  // 800, 600

3. 數據同步與恢復

當應用需要在不同使用者設備之間同步數據時,可以結合 Electron Store 和後端 API 或雲存儲實現數據的同步與恢復。Electron Store 可以作為本地數據存儲的解決方案,當應用連接到網絡後,數據可以從雲端同步並恢復到應用中。


總結

Electron Store 是一個功能強大且輕量級的本地存儲解決方案,適合 Electron 應用中處理使用者設定、應用狀態、敏感數據的持久化存儲。它不僅簡化了文件操作的繁瑣過程,還提供了加密、數據遷移等進階功能,讓開發者可以輕鬆地管理本地數據。在實際應用中,Electron Store 可以應用於使用者設置保存、應用狀態管理、數據同步等場景,是 Electron 開發者不可或缺的工具之一。


上一篇
Fetch 技術:SWR & RTK Query
下一篇
中場休息:聊聊 Electron 中的性能優化策略
系列文
從 0 到 1:30 篇文章帶你玩轉 Electron 與 React26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言