Electron Desktop App Development · 课时

本地存储与 IndexedDB

在 Electron 应用中使用 `localStorage` 和 `IndexedDB` 等类似浏览器的存储机制持久化客户端数据

本地存储与 IndexedDB 是 CoddyKit 上的免费 Electron Desktop App Development 课时。这是第 1 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Electron Desktop App Development 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Electron Desktop App Development 课程共包含 3 节课。

本课时的部分内容尚未翻译，以英文显示。

Saving Data in Electron Apps

When building desktop applications with Electron, you often need to save user data or application settings. This is called data persistence.

Unlike web apps that rely on servers, Electron apps can store data directly on the user's computer. This lesson explores two common browser-like storage methods: localStorage and IndexedDB.

Introducing Web Storage API

Electron's renderer processes are essentially web browsers. This means you can use standard browser APIs for data storage, like the Web Storage API.

The Web Storage API provides two main types:

localStorage: Stores data with no expiration date.
sessionStorage: Stores data only for the duration of the browser session.

We'll focus on localStorage for persistent data.

Understanding localStorage

localStorage allows you to store data as simple key-value pairs. Think of it like a small, local dictionary.

Persistence: Data stored in localStorage remains even after the app is closed and reopened.
Scope: Data is unique to the origin (your app's domain, usually file:// for Electron).
Capacity: Limited to about 5-10 MB per origin.

It's great for small amounts of data like user preferences or simple settings.

Storing Data with localStorage

You can store data in localStorage using the setItem() method. Remember, values are always stored as strings.

Try running this example in your renderer process:

/* This code runs in the Electron renderer process. */

const username = "CoddyKitUser";
localStorage.setItem("userName", username);

const userSettings = {
  theme: "dark",
  notifications: true
};
// Objects need to be converted to JSON strings
localStorage.setItem("appSettings", JSON.stringify(userSettings));

console.log("Data saved to localStorage!");

Retrieving & Removing localStorage Data

To get data back, use getItem(). To delete, use removeItem(). If you stored an object, you'll need to parse it back from JSON.

Run this snippet after the previous one:

/* This code runs in the Electron renderer process. */

const storedUsername = localStorage.getItem("userName");
console.log("Stored Username:", storedUsername);

const storedSettingsString = localStorage.getItem("appSettings");
if (storedSettingsString) {
  const storedSettings = JSON.parse(storedSettingsString);
  console.log("Stored Theme:", storedSettings.theme);
}

// To remove an item:
localStorage.removeItem("userName");
console.log("Username removed.");

// To clear all localStorage for the origin:
// localStorage.clear();

Limitations of localStorage

While easy to use, localStorage has some limitations:

Size Limit: Typically 5-10 MB per origin. Not suitable for large datasets.
String-Only: All data is stored as strings. Objects and arrays must be manually serialized (e.g., with JSON.stringify()) and deserialized (JSON.parse()).
Synchronous: Operations block the main thread, which can cause UI freezes if you're storing/retrieving a lot of data.
No Indexing/Querying: You can't directly query data, only access by key.

Introducing IndexedDB

For larger, more structured, and complex data, IndexedDB is a powerful alternative. It's a low-level API for client-side storage of significant amounts of structured data.

No Size Limit: Generally limited only by available disk space.
Structured Data: Can store JavaScript objects directly, not just strings.
Asynchronous: Operations don't block the UI thread, making it suitable for performance-critical apps.

IndexedDB Core Concepts

IndexedDB works with a few key concepts:

Databases: You create databases, each with a name and version.
Object Stores: Like tables in a relational database, but they store JavaScript objects. Each object store has a key path.
Indexes: For fast querying of data within an object store.
Transactions: All read and write operations must occur within a transaction, ensuring data integrity.
Asynchronous: Operations return IDBRequest objects, which resolve with success or error events (or Promises).

Basic IndexedDB Setup

Setting up IndexedDB involves opening a database and defining object stores. This is usually done in the renderer process.

This example shows how to open a database and create an object store if it doesn't exist:

/* This code runs in the Electron renderer process. */

const request = indexedDB.open("CoddyKitDB", 1); // DB name, version

request.onerror = (event) => {
  console.error("Database error:", event.target.errorCode);
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log("Database opened successfully!");
  // You can now interact with the database (add/get data)
  db.close(); // Close when done if not actively using
};

request.onupgradeneeded = (event) => {
  // This runs if the database didn't exist or version changed
  const db = event.target.result;
  const objectStore = db.createObjectStore("users", { keyPath: "id" });
  console.log("Object store 'users' created.");
  // You can also create indexes here
  objectStore.createIndex("name", "name", { unique: false });
};

Quick Check on Storage

You've learned about localStorage and IndexedDB. Which statement accurately describes a key difference?

Recap: Local & IndexedDB

Great job! You've explored client-side data persistence in Electron:

localStorage is simple, synchronous, key-value storage for small, non-critical data.
IndexedDB is a powerful, asynchronous, transactional database for large amounts of structured data.

Choosing between them depends on your data's size, structure, and performance needs. Both are crucial for building robust Electron applications that save user data locally.

常见问题解答

「本地存储与 IndexedDB」课时是免费的吗？

是的 — 「本地存储与 IndexedDB」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Electron Desktop App Development 课程的其余内容，请升级到 CoddyKit PRO。 Electron Desktop App Development 课程共包含 3 节课。

「本地存储与 IndexedDB」这节课中我会学到什么？

在 Electron 应用中使用 `localStorage` 和 `IndexedDB` 等类似浏览器的存储机制持久化客户端数据你通过在浏览器中直接运行的动手代码来练习 Electron Desktop App Development，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Electron Desktop App Development 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Electron Desktop App Development 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 3 节。

「本地存储与 IndexedDB」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Electron Desktop App Development 课中编写并运行代码吗？

能。每节 Electron Desktop App Development 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Electron Desktop App Development