Penyimpanan Lokal & IndexedDB
Manfaatkan mekanisme penyimpanan mirip peramban seperti `localStorage` dan `IndexedDB` untuk mempertahankan data di sisi klien dalam aplikasi Electron Anda.
Penyimpanan Lokal & IndexedDB adalah pelajaran Electron Desktop App Development gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Electron Desktop App Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Electron Desktop App Development mencakup 3 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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
localStorageremains 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
IDBRequestobjects, which resolve withsuccessorerrorevents (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:
localStorageis simple, synchronous, key-value storage for small, non-critical data.IndexedDBis 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.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Penyimpanan Lokal & IndexedDB” gratis?
Ya — teks lengkap “Penyimpanan Lokal & IndexedDB” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Electron Desktop App Development, upgrade ke CoddyKit PRO. Kursus Electron Desktop App Development mencakup 3 pelajaran total.
Apa yang akan aku pelajari di “Penyimpanan Lokal & IndexedDB”?
Manfaatkan mekanisme penyimpanan mirip peramban seperti `localStorage` dan `IndexedDB` untuk mempertahankan data di sisi klien dalam aplikasi Electron Anda. Kamu berlatih Electron Desktop App Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Electron Desktop App Development?
Tidak diperlukan pengalaman sebelumnya. Electron Desktop App Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 3.
Berapa lama pelajaran “Penyimpanan Lokal & IndexedDB” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Electron Desktop App Development ini?
Ya. Setiap pelajaran Electron Desktop App Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Penyimpanan Lokal & IndexedDB
- Akses Sistem File
- Basis Data Tertanam dengan SQLite