Storing Data in Electron JS Applications - 4 Methods

Every app requires storing some sort of data. Earlier I made a video about using Sqlite with Electron, in this video I am going to show you 4 other ways of storing data in Electron.
These methods are suitable for smaller pieces of data that can be stored in key value pairs.
The methods are
- Flat JSON file,
- sessionStorage
- localStorage
- IndexedDb
You can store data in IndexedDb on both the renderer and the main process.
Watch this video to see these storage methods in detail.
Code : github.com/cyr...
Don't forget to Subscribe and hit the bell icon so that you'll get notified about my videos.
#electronjs #programming #coding

[@talhazaryab]

I wish your channel grow fast. Your content is rare.

[@ramdomguyfiftychars]

Thank you very much! This helps a ton! Working on a hobby project to play around with Electron+Vite+Vue here :D

[@coderjeet]

Great combo! :)

[@Dungeon-Umami]

I did it like this:
preload.js:
const {contextBridge, ipcRenderer} = require('electron');
contextBridge.exposeInMainWorld('storage', {
w_storage: (data)=>ipcRenderer.invoke('storage', data)
});
main_node.js:
const fs = require("fs");
ipcMain.handle('storage', (e, result)=>{
if(result.method === 'read'){
if (fs.existsSync(result.path)) return JSON.parse(fs.readFileSync(result.path));
}
if(result.method === 'write'){
fs.writeFileSync(result.path, JSON.stringify(result.data, null, 2));
return "data saved";
}
});
window.js:
async function herota123(){
let Need_to_save = {lol: "kek", che: ["bu","rek"]};
let await_writing = await globalThis.storage.w_storage({method: "write", path: "delete_me.json", data: Need_to_save});
console.log("await_writing", await_writing);
let Read_from_memory = await globalThis.storage.w_storage({method: "read", path: "delete_me.json", data: undefined});
console.log("Read_from_memory", Read_from_memory);
}
herota123();

[@andreicusnir8077]

erjan

[@arnabshanta]

Just what I needed

[@coderjeet]

Glad it helped

[@adamjones1951]

How do we write multiple data points to the file instead of overwriting the pre-existing data?

[@dipankarsahoo7119]

this really helped me a lot thanks sir

[@coderjeet]

Glad it helped

[@senikouame4750]

if I use js Fill how can I, make CRUD system with it ??

[@andreicusnir8077]

Hey I have a question. Would it work with Electron version 23.1.3 and Angular 15? I have tried to save the data with Electron-store from ngx-electron but it failed. I also used IPC to store the data and again, fail. Are there other alternatives? Would be very happy to get an answer. Thanks

[@OmniaAb]

very helpful, thank you

[@jisonsoft4810]

Can you create a plugin architecture in electrons?

[@vanbachucnguyen1831]

thanks for your instruction

[@tripmad]

Thank u for all your tutorials😊

[@giriai]

But how did you write file on MAS? MAS doesn't allow you to write data to disk...

[@coderjeet]

Hmm.. Mas?

[@arijitchakrabarty1552]

Quite insightful! Thanks! Quick question: I have a routine manager application. In it, I want to give the user the ability to store routines. Should I use IndexedDB for that or would storing it in a local json file be better? Thanks!

[@coderjeet]

I wouldn't use both. If you have data that needs to be saved, don't save it in browser sessions. Save it in a json file

[@arijitchakrabarty1552]

@@coderjeet understood. Thanks!

[@allencorbalan5879]

super informative and helpful thanks!

[@coderjeet]

You are welcome!

[@afnibi]

auto subs...thanks from indonesia

[@ABentPaperclip]

you never actually showed how the json data gets out of an object in main.js back to render- you're just logging it to the console, which isn't enough to re-populate your form...