DEV Community 👩‍💻👨‍💻

Cover image for What's the best way to store data for my very basic app?
Stephanie Hope
Stephanie Hope

Posted on

What's the best way to store data for my very basic app?

I'm creating a very simple app to visualise my progress and grades in my courses, which is something I used to do on paper back in undergrad. I figured it would be a nice simple project which would actually be of use, if only to me.

I've started out creating it as a web app, creating SVG using Javascript. However, I've run into a snag with how to actually get the data in. I want to be able to use a form (or similar) to add new data when I receive grades, but I don't know how to store and access that data.

From my research, it seems that I can't access a database using Javascript, and I also can't access a local JSON file. Is there another way to have this data stored and be able to be updated and saved? Do I need to create a Java servlet just so that I can read/write a JSON file? (Java is the only backend I know so far, but if there's something else that will make it easier, let me know!) Is this the time to learn one of these mysterious frameworks everyone's on about?

My other alternative is to give in and do the whole thing in Java, but I'd like to have the possibility of putting it online eventually rather than having it tied into a desktop app.

Any advice?

Top comments (7)

Collapse
 
deciduously profile image
Ben Lovy

I'm far from an expert here, but I think the simplest solution is, as you say, to build a small backend. Java does seem like overkill for this to me, but if it's what you know that might be the best option. Otherwise I'd check out Flask for Python or Express for Node.js. Both will allow you to keep the backend incredibly simple but still allow FS access. You'd be marshaling data across the boundary likely via API endpoints.

If what you're storing can be represented as key/value pairs, you could see if the Web Storage API could work, but I think that classifies as "abuse" :)

I solved this problem once by using file-type input elements to import data and octet-stream download links with the full content in base64 string form in the link itself to get data back out. I do not recommend this.

Collapse
 
smh30 profile image
Stephanie Hope Author

Thanks! I do know a tiny bit of Python so I'll try taking a look at Flask!

Collapse
 
rhymes profile image
rhymes

What about a key value database that's managed by a cloud provider? If you put your data in the localStorage, such data will only live on the person's computer. You need to synchronize it on the server somehow if I understood correctly.

You can use something like Firebase directly from your JS web app.

Basically the user signs in (Firebase handles auth as well), they do stuff with your app and then your app saves and retrieves the data on the server

Collapse
 
samuraiseoul profile image
Sophie The Lionhart

Like someone else said, localStorage can be a good solution, but it will only exist in that browser on that computer, so if you switch from Chrome to Firefox, or get on a different computer you will not have access to it. As long as that's a limitation you can live with, it's a great tool!

Another alternative as someone else mentioned is using a cloud provided DB. You can even use AWS Lambda along with one of AWS' many DB solutions to get a super simple DB store up quickly.

I hope that can help you a bit, otherwise yes, a quick and super simple backend in Java or another language would be the way to go.

Collapse
 
webdeasy profile image
Lorenz

Hey!
Check out the Cordova framework: cordova.apache.org/

You can create a "webapp" using html, css and javascript and cordova can convert it to a android and/or iOS app.

It's very simple and then you can store your data in the localStorage of javascript: developer.mozilla.org/de/docs/Web/...
The localstorage is like a cache on your phone.

If you have any questions, feel free to ask :)

Collapse
 
smh30 profile image
Stephanie Hope Author

Thanks, localStorage looks like it might be just what I need! I guess I just didn't know what to search for to find out it existed.

Collapse
 
desi profile image
Desi

Following along - this will be relevant to some of my projects too!

🤯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs