hey guys this is kodachite your best friend in programming and today I'm going to talk about storing data in an electron app so if you're making an electron app you're certainly dealing with data and you will want to store it somewhere so that you can retrieve it later and electron gives you a couple of options to do that and as usual things are a little bit trickier than electron than any other platform because electron is divided into two processes the main process and the renderer process so the main process runs in the background and deals with all the data loading and processing that you might need to in the background and the renderer process works on the front end it's the display area of the app where you load up the HTML you do all the interactions and these two processes are protected from each other so whatever data you're gonna store they are stored differently at both ends now the front-end process is a Chrome browser so it gives you the entire Chrome storage API that means you have access to session storage you have access to local storage and also index DB all of these are browser based storage apis fashion storage is useful when you want to store some data temporarily as so as soon as you close the app the data is gone local storage is when you want to persist the data a little bit longer so the data will still be there when you load the app back up now the indexeddb is more like a nosql database it's a complete database system which is a part of your browser so you can install pretty complicated objects in there and then even do operations like search just like you would do on a standard nosql database so that's also an option available to you and on the back end the easiest way that you can store data is using Json flat files so what you can do is you can create objects containing your data and you can just persist them to a Json file load them up again load them into an object and that's pretty good you know system if you want to persist specific objects or if you want to purchase data but it's not like a complete database I want to tell you just because some data is on the renderer process like in session local and index DB it doesn't mean that you cannot get it in main DB main process actually you can it's it's a little bit more complicated but it's not too difficult and I'm going to show you that exactly so hang on with me let's get this demo started and learn how to store data in electron let's get started with Json file let's see how to store data and read data from a flat Json file to make things more organized I have set up a test application which will be using as a case study so it's a basic survey app with a lot of questions things like your name and you can put in data and when you press next it moves on moves you on to the next question like what's a city and you can answer all these questions and what we'll be doing is we'll be saving this data to the hard disk using the Json file in this particular case let's take a look at the HTML before we proceed so this app is divided into a number of tabs you can see each tab has a question and has an input box where people can put in the answer and it's got a name depending on what the input box is about so it's got all these tabs now let's look at the code if you've been watching my videos if you've watched other videos from me about electron you know by now about things like the render process and the main process and you know how they communicate you know on the render process you've got the front end you've got the HTML file and you can have JavaScript running on the front end just as it does on a browser so this is what this setup is about it's got a Javascript file where everything is happening Main view.js and if you go to main viewer.js I've got this function called save Json file and it is set up to the next previous button so there is one function that handles next and previous both and when it's called depending on the page number that we are on that we are supposed to go to it also called save Json file and in save Json file what we're doing is very simply we are retrieving the data from the input boxes using document dot get Elements by name and we've got seven different six different variables with all the data in there I'm console logging them just for our benefit so that we can see that they're actually being locked that they are being collected and then using the context Bridge we are crawl we are calling a save data function on the preload from where it will be sent to the main process because remember the rendering process cannot communicate or cannot use your system resources it's a browser to use your system resources you have to make the request from the main process right so when you go to the main process where you go to the preload file this is the context Bridge you've got a function called save data which does nothing but calls IPC renderer and passes it all the data so in this line what I've done is I've taken all the different variables I've taken all the different data points and put it in one collection and that collection is passed to save data and using IPC renderer we call the main process IPC renderer is used to call the main process which is in main.js and you can see now we are trapping this event we are talking and in save data I'm logging it one more time and then I'm using Json stringify to convert that data into a string and then we can just simply write it using write file sync we can give it a name just the folder name and the file name and the and the content that you want to write and that's it the file is written you can see the file over here is written and to retrieve it back to bring it back to read it you need to do the opposite that is read the file first I'm checking whether it exists or not then you can read it using read file synchronous or asynchronous whichever version you want and finally use Json dot parse to read the data into an object and if you lock the object it's gonna be the same text let's take a look and see if that actually works so I'm gonna run this app again now here we go let's fill in the actual data but first let's look at data Json you only have Coda G this is what I filled in earlier and now let's put in some fresh data coderjeeth and let's check city so to buy what's your favorite shopping site these days it's Amazon favorite car I love cheap I got one favorite song well there are a bunch but let's go for Unstoppable these days I'm listening to this and mobile brand it has to be Samsung and that's it so if you write that data correctly if the code is working correctly our data.json file should be updated with all this info you can see it Korea Dubai all of this info is written over here right and the and the basic code to write this is in main.js uh right over here stringify but to bring it to the main process we had to do a little bit of work step one pull the data in the renderer process in the rent using a Javascript file Step 2 take it to the preload file using a context Bridge so we have the step two and step 3 call IPC renderer.send to send the data to the main process and step 4 write it in the main process and I do have this entire project as a GitHub repo that's public and it's available look in the description to file the links to find the link so that you can read the code yourself and you can use it as a sample let's next let's move on to the other three options now and now it's time to find out how you can store using the session storage and local storage the important thing about session storage and local storage is that both of these storage systems are on the render process so you can't call them in the main process directly you'll have to call them in the front end in the browser in the render process so right over here and you can send the information back to the main process using IPC Communications and if you are new to IPC Communications I have a video on that you can find it on my channel you can also pull up data from the bean process and send it to session storage and local storage again using IPC Communications let's get started and see how it works so in this survey form let me show you a phenomena I put in my name here korrajeet and then move to next and I can print my Siri if you go back you will see that my name is still being displayed but if I reload the page the name is gone because the data is not stored so we're gonna try and solve this problem using session storage and local storage and let's see if we can get this name to persist so we are now in main.html the interface and if you scroll to the bottom you will find the file mainview.js that is the Javascript file that is dealing with the interface that's controlling all of the interface and if you open it you got all these functions like show Tab and there is a next previous button we've already dealt with it before for Save Json file and what I want to do extra now is to store this in a session or a local storage so I'm going to start with session let's just call it save info and we'll need to create a new function and now we can refer to the session storage on the window object so session storage is an object related to the window object and you can call session storage dot set item to save anything you want let us save all of these details in the session storage so I'll just take it out put it all over here and then window dot session storage Dot is that Adam all right so we are saving all this data in the session storage every time the next or the previous button is pressed we've written the code to set it but we also need to restore it and we'll do that in the load event in the document content loaded event so this time we'll call load info another function and it's very easy we'll just do the reverse of here we're gonna pull the data instead of setting it at copy over all right so we've got all the info that we saved earlier into these properties into these variables now the thing is if there is nothing over here we're just gonna get empty strings and that's perfectly okay let's set the actual value of the input boxes we're gonna use document.getelements by name dot value and we're going to set it to the value that we have here I'm gonna repeat that all right so all of that is done and now the data is being pulled from session storage and set on the input boxes let's see if it works and after we reload this time do we see the actual content so I'm going to load up the terminal again here is our survey form go to cheat press next and reload page and you can see that you've got code.jit over here let's try another thing Dubai go back and it should be saved so you can see Dubai right over here but we haven't reloaded yet reload we see corajit over here and if it's saved in the session storage we'll see Dubai over here so this is being loaded using the load info function and how do we test it whether it's working or not let's just comment it out and let's see what happens so again coderjeet go next go back and this time it's here but we haven't reloaded and if we reload it's gone I will have you notice one thing when I run this project you will see that it starts out with an empty form this time there is no name to start with so if I put in my name here again I go back and I go back again I reload it and the name still there but when I actually close the app and I restart it the name is gone so the session storage like I told you earlier will persist the data only till the lifetime of the app once the app closes the session storage will be cleared and all the data that you stored in there will be cleared what if you want to retain the data across app loads you want to save some data and have it back even after you start the app two days three days or even longer later so do that what you need is the local storage and it works just like the session storage let's see it in action let's rename this function to load session info just so that we can differentiate between local storage and session storage and this time when we are saving the data in save info let's call it save session and for two in fact so we're going to comment out the save session info and load session info functions I'm leaving them in this project so that you can check it out in the repository and use it if you need to we're going to create a couple of new functions save local info and let's just copy this over here's the new function save local info and this time instead of saving it on the session storage we just gonna save it on the local storage so they work pretty much the same the entire system is the same just replace the name with local storage and you will have the data stored to the local storage so we're going to repeat this again create the new function load local info here we go and again instead of session storage local storage so now we are storing the data in the local storage and also restoring it or retrieving it from the local storage let's run it and see what changes the first time we run the app there is no data in the local storage and this is empty so we'll write code Ajit we'll press next just to save it to the local storage come back still here of course we're gonna reload and you can see still here I'm going to close the app run that again and you can see the data is still here so we can press next I'm going to fill in the CD name too all right so that's about it reload and you should see all this data over here close the app restart and all this data is still here so local storage is going to persist your data across app loads and there is no real expiration date you will be able to remove this data manually of course using the remove item method but otherwise this data is going to persist and finally we have index DB this is a complete nosql data set kind of like mongodb which is a part of your browser and in this case your electron app now index DB is something that I don't advise you to use unless you are storing complete data sets and need to store some non-trivial data it's not suitable for just key value pairs you can use local storage for that but in this case I am going to show you how to use index DB because we want to complete this demo and we want to explore all the systems now to make using indexeddb easy because it's a promise based architecture database it's very hard to use it otherwise we are using a library called idb This is the node.js library and you can install call it in node using npm but in this case we're going to use it with browser and it's suitable for that there is a script that you will need to refer to so I have done exactly that in my main HTML just before the mainview.js I have referred to the CDN file which will give me access to idb and inside my main view I have to write a lot of code to make index TP work now this is a database so you will have to open the database so in Dom content loaded I'm first opening the database this is the opening code awaitidb Dot opendb and the database name that I am opening in this instance is settings you can have multiple database on the same website so just refer to it by names this is my Store settings store and when you run the database for the first time you might need to create it so there is the upgrade command which will execute only if an upgrade is needed and the second line I'm calling is load index DB info that is the actual function where the database is being loaded and DB is coming from idb you can see that I create an instead of idb using the opendb command idb.opendb the DB object I have declared at the top and I can use it all across this file all across this module so I am using DB dot get to get fname data key value pair it's a key Value Store from the settings database so I'm loading up all the settings in a similar manner City site car song and mobile all of the data is being loaded over here and finally I am assigning that data to the input boxes on the screen now while saving the data it's the reverse function of course I have created a function called save index DB info and in that function I am first retrieving the data from the input boxes and then saving it to the database using another asynchronous function called put which is again a part of the idb library and I'm saving it to the settings database this is the actual setting and finally the setting name so this way you can set and retrieve settings from index DB but like I said earlier this is an overkill for this particular case because you should use it when you have a lot of data but let's test it anyway so I'm gonna put in some data next and put in the city name and then put in my shopping website and finally let's just close it and check it again if it actually works here we are you can see that the data is still here and if you will notice the code we have already commented out session info and load local info and we are only using load indexeddb info to retrieve this data so all of this is actually coming from the index DB now this concludes our training on storing data in electron I hope you enjoyed this lesson as much as I enjoyed creating it and if you want to stay connected to me do subscribe I do make a lot of videos on technology on programming across multiple Technologies so subscribe and I will be coming to you again with a new video on programming the cisco.g your best friend in programming signing off