CODEWITHSUNDEEP
javascriptjsonelectron
JQuery Mobile
JQuery Mobile

Reputation: 6301

Saving JSON in Electron

I am building an app using Electron. In this app, I am building a data structure using JSON. My data structure looks like this:

{
  items: [
    { id:1, name:'football' },
    { id:2, name:'soccer ball' },
    { id:3, name:'basketball' }
  ]
}

I want to save this JSON to a file called "data.json". I want to save it to a file because I want to load the next time the application starts. My challenge is, I do not know how to save the data. In fact, I'm not sure where I should even save the file. Do I save it in the same directory as the app? Or is there some cross-platform approach I should use?

Currently, I have the following:

saveClick: function() {
  var json = JSON.stringify(this.data);
  // assume json matches the JSON provided above.
  // Now, I'm not sure how to actually save the file.
}

So, how / where do I save JSON to the local file system for use at a later time?

Upvotes: 10

Views: 27528

Answers (5)

gujaratiraja
gujaratiraja

Reputation: 379

There are multiple steps:
Step 1:
As of version 5, the default for nodeIntegration changed from true to false. You can enable it when creating the Browser Window:

const createWindow = () => {
  const win = new BrowserWindow({
     width: 1000,
     height: 800,
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
     }
  })
}

Step 2:

function writetofile() {
        let configsettings = {
          break: output.innerHTML,
          alwaysonoff: toggleoutput.innerHTML,
        };

        let settings_data = JSON.stringify(configsettings, null, 2);

        const fs = require("fs");

        fs.writeFileSync("assets/configs/settings.json", settings_data);
      }

Upvotes: 0

Omar Samudio
Omar Samudio

Reputation: 27

`const fs = require('fs');

let student = { 
    name: 'Mike',
    age: 23, 
    gender: 'Male',
    department: 'English',
    car: 'Honda' 
};
 
let data = JSON.stringify(student, null, 2);

fs.writeFile('student-3.json', data, (err) => {
    if (err) throw err;
    console.log('Data written to file');
});

console.log('This is after the write call');`

Upvotes: 0

Andrew Feldman
Andrew Feldman

Reputation: 107

Electron uses node.js as its core. You can use the following:

var fs = require("fs");
read_file = function(path){
     return fs.readFileSync(path, 'utf8');
}

write_file = function(path, output){
    fs.writeFileSync(path, output);
}

For write_file(), you can either pass "document.txt" as the path and it will write it to the same directory the html file it was run from. You can also put in a full path like "C:/Users/usern/document.txt" and it will write to the specific location you want.

Also, you can choose any file extention you want, (ie. ".txt", ".js", ".json", etc.). You can even make up your own!

Upvotes: 6

Ran Yitzhaki
Ran Yitzhaki

Reputation: 159

I wrote a simple library that you can use, with a simple interface, it also creates subdirectories and works with promises/callbacks. it will save the data into app.getPath("appData") as the root folder.

https://github.com/ran-y/electron-storage

Installation

$ npm install --save electron-storage

usage

const storage = require('electron-storage');

API

storage.get(filePath, (err, data) => {
  if (err) {
    console.error(err)
      } else {
        console.log(data);
      }
    });

storage.get(filePath)
    .then(data => {
      console.log(data);
    })
    .catch(err => {
      console.error(err);
    });

storage.set(filePath, data, (err) => {
      if (err) {
        console.error(err)
      }
    });

storage.set(filePath, data)
    .then(data => {
      console.log(data);
    })
    .catch(err => {
      console.error(err);
    });

Upvotes: 3

Bruno
Bruno

Reputation: 968

Electron lacks an easy way to persist and read user settings for your application. electron-json-storage implements an API somehow similar to localStorage to write and read JSON objects to/from the operating system application data directory, as defined by app.getPath('userData').

Upvotes: 6

Related Questions