How to store user data in Electron

The 3 most common ways to persist user data with an example

Cameron Nokes
Sep 17, 2016 · 4 min read
Image for post
Image for post

Originally published at https://cameronnokes.com/blog/how-to-store-user-data-in-electron/

Code in this article can be found here: https://github.com/ccnokes/electron-tutorials

Most Electron apps need some sort of way to save user data. This could be user preferences (e.g. show/don’t show notifications) or some kind of application data (e.g. last window size and position). So how do we save user settings in an Electron app? And where do we save them to?

Because we have access to both browser and node.js APIs, we have some options for persisting user data. Let’s go over them and then we’ll look at a practical example.

HTML5 Storage APIs (localStorage and IndexedDB)

Flat file

Embedded database

Where should I store the data?

Electron provides app.getPath which returns the right directory, depending on your platform.

Why not store the user data closer to all our app’s source files?

  • when we auto-update the app, our source files may get moved or delete
  • changing or adding to an app’s internal files will invalidate the code signature

Let’s persist some data (example)

Let’s encapsulate the data getting and setting logic in a class called Store. The main things this class needs to do is read/write to a file and get/set values. We’ll also make it so that it can work in either the renderer or main process. When it saves the file, it needs to save the file to the user’s app data directory. We’ll make it so our class takes an options object as the first argument. We’ll pass in the data file name and some defaults in the options.

Ok that’s it. Pretty simple. Now let’s integrate it into our app.

All done. Now let’s start our app up and test it out.

Resizing the window will cause the file to be written. It should look something like:

{
"windowBounds": {
"width": 427,
"height": 289
}
}

Our Store class is actually compatible with a community module called electron-config (yep, we implemented the same API), and it’s a great module with more features and test coverage.

Saving the window’s position and size is a common use case in Electron apps. Another convenient community module that handles this is electron-window-state.

There you have it!

For a complete video course on how to build an Electron application…

Cameron Nokes

Javascript and front-end development how-tos

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store