🗄️

Storing Data in an Electron App

Jul 4, 2024

Storing Data in an Electron App

Introduction

  • Lecturer: Kodachite
  • Topic: Storing data in an Electron app
  • Audience: Programmers building Electron apps.

Electron Processes Overview

  • Main Process: Runs in the background, handles data loading and processing.
  • Renderer Process: Front-end, handles display, HTML, and user interactions.
  • Data Storage: Managed separately for both processes.

Front-end Storage Options

  • Chrome Storage API: Available to the renderer process.
    • Session Storage: Temporary, data cleared once app closes.
    • Local Storage: Persistent, data stays even after the app is closed and reopened.
    • IndexedDB: NoSQL database for complex storage needs, allows for searching and other database operations.

Back-end Storage Options

  • JSON Flat Files: Simple, easy option for storing object data.
    • Create JSON objects, save them to a file, and reload as needed.
    • Context Bridge: Required to pass data from renderer to main process for file storage.

Example Application: Survey App

  • Purpose: Demonstrates data storage options in action.
  • Flow: Data entered in front-end, stored and retrieved using various methods.
  • HTML Structure: Multiple tabs, each containing questions and input fields.

Implementation Steps

JSON File Storage

  1. Save Data: Render process collects data, context bridge sends it to the main process, which writes it to a JSON file.
  2. Retrieve Data: Main process reads the JSON file, sends data back to the renderer to populate the front end.

Session Storage

  1. Save Data: Data temporarily stored in session storage using sessionStorage.setItem.
  2. Retrieve Data: Data retrieved and populated in the front end using sessionStorage.getItem.
  3. Lifetime: Data lasts only for the session duration (until app closes).

Local Storage

  1. Save Data: Similar to session storage but uses localStorage.setItem.
  2. Retrieve Data: Data retrieved using localStorage.getItem.
  3. Lifetime: Data persists across app restarts.
    • Test: Close and reopen the app to check if data is retained.

IndexedDB Storage

  • Library Used: idb (IndexedDB simplified with promises).
  • Database Operations:
    1. Open DB: Create or open the IndexedDB.
    2. Save Data: Store data using idb.put.
    3. Retrieve Data: Retrieve data using idb.get.
  • Suitability: Best for non-trivial, complex data sets.

Code Examples and Flow Explanation

  • Renderer to Main Communication: Using IPC (Inter-Process Communication) for data transfer.
  • Functions:
    • saveJsonFile(), saveData(), loadInfo(), saveInfo(), etc.
  • Preload Script: Ensures safe communication and data handling between contexts.

Conclusion and Resources

  • Project Repository: GitHub link provided in the lecture description.
  • Further Learning: Recommended viewing on IPC communications.
  • Encouragement: Subscribe for more tech and programming content.

Next Steps

  • Demonstrations and practical examples on using session storage, local storage, and IndexedDB within the provided app context.
  • Tips and best practices for choosing the right storage method based on application needs.

Summary

  • Multiple methods available: JSON flat files, session/local storage, and IndexedDB.
  • Choice depends on persistence needs and data complexity.
  • Example provided using a survey app to illustrate each method.

Notes Prepared by: [Your Name]

Full transcript