Help with storing variable values in inventory site

Alright, so I’ve got this little inventory site I’m making for my job. I’ve put all the code I have for it in a little codepen here, so everyone can see what I’m working with:

I’ve got everything working like I want…you can see the variable values in the table, add and subtract values based on using/restocking items, some conditional formatting…all good. I’m working on this code using VisualStudio Code, with a little node/gulp/browsersync system I’ve managed to get working. (I had to follow a loooot of tutorials to finally get that to work, so I don’t fully understand what it does or how it’s working…just that it does work.) Just put it all in a pen so it was easy to share with others. Also, I’m working on a Windows 10 environment.

My issue is, it doesn’t store the updated values long-term / across refreshes. Which makes sense, since currently the values are hard-coded in my js file. I know I need either local storage or a database solution to solve this…I know they need to be stored somewhere outside of the code, that can then be accessed when I need to update the values.

However…I’m struggling on finding the easiest/best way to do this. Things I’ve tried so far:

  • using javascript’s localStorage. Might have just not been able to figure out the proper way to write the code, but I couldn’t ever get it to store the values and call them properly. It seemed like it was accessing the storage (because I built in an error text to show if it didn’t access it), but I never could get it to actually display.
  • Google Sheets API. I have the data stored in a spreadsheet there, and it seemed like I could use the API to access it with my code. Haven’t managed to get anything to work with that yet. Again, may just be that I can’t figure out how to properly write the code…reading the articles it seems pretty straightforward, but I can’t seem to get it to show anything for me.
  • Embedding my Google spreadsheet into an iframe on a page. Works great on my computer, I can edit and see the whole sheet. However…it’s super buggy on my phone, using the mobile browser (chrome). It moves part of the bottom of the sheet to overlap the top for some reason, and I can’t edit anything. I can request the desktop site, but it’s super slow. The whole point of this (instead of just accessing the spreadsheet from my phone’s drive app) is that the drive/sheets shortcut is somewhat slow on my phone, and most mobile sites are a bit faster. But if I can’t edit it and even see it properly…not worth it. Something’s buggy with iframes on mobile, I think. And as my main access point for this site will be my phone, while I’m at work…kinda need it to work on mobile.
  • Looked into AirTable and FireBase as options…AirTable seems really nice, but trying to read the docs to figure out how to access it from my code seemed too over my head. FireBase felt way more technical than I could understand right now, and also seemed like it involved more than I really need for this project.
  • Considered using an older site I built, that had a database, and just re-writing the code to fit the data model I need for this. But…it just felt like waaaay to much work to almost completely rewrite the whole thing, plus that old site already had borrowed code from a class, which was the only way I could get it to work (since I didn’t understand what it was really doing, other than accessing the database). It just felt like a step backwards, and not the best for this project.

I’m realizing that I’m likely getting ahead of myself here…I’m still in the front-end section of the FCC course, and though I did some work with databases in the CS50 course on EdX, it mostly used php which I haven’t been messing with lately. I really wanted to figure this out with JS, as that’s more of what I’m learning now and more where I see my interest currently. Just…every Google search I do uses frameworks I haven’t even looked at yet, or the sample code I find doesn’t seem to work, and I just can’t seem to actually get anywhere.

So I guess what I’m asking is…if this was your project, and you needed a way to store some variable values that you could access across multiple sessions and update when needed…how would you do it? Are there any articles for storage/databases you’ve found that made sense to someone near the beginning of their learning that might help? Or even some pseudo-code to help me go in the right direction? I’m open to using most anything…I’m just not really sure where to go from here. I want this project done because it’ll help me a good bit at work, and I just can’t figure this last bit out.

You’re right, you need a database option.

I find that Node integrates very easily with MongoDB, which you can learn right from Mongo:

That being said, a lot of people prefer SQL based databases like MySQL and Postgres. You can learn the basics of SQL at Codecademy, and it’s a solid course.

It’s going to be a couple of days to learn the basic syntax of the database you choose, and another day or so to integrate it with your project. It’s an inevitable part of web development though, and well worth your time.

Good luck!

As already told by slocodemonkey, database is the key to your scenario. Now basing on your requirement you can choose which database you want to use.

Since you are already using nodejs, there are plenty of packages that you can you use basing on the database that you choose. Good luck with the development

Agreeing with previous speakers. Just throwing a shout for SQLite which I personally really likes. It’s also SQL based but doesn’t require as much setup as MySQL or SQL Server.

Otherwise MS Access databases are usually easy to work with (at least with VB) but I havn’t used them together with node…

Personally I’d go for either SQLite (cause of the convenience) or try to learn a non-sql storage like Mongo.

The mongodb m101js started 2 days ago if you want to join you might still be able too.