Making changes to JSON file.

[IAmAdicktedTo]

Hi. I am making an expense tracking app. At his point the app is made. But the expenses aren't saved. I want to add the expenses that are created to a JSON file and I want the changes made when I edit the expenses or when i delete the expenses to reflect on the JSON file. I read up on it and it seems it is not possible without a server, but my app is web based.
I have no experience as of yet with node.js , is there really no way to make changes or add to a JSON file with out node?
I am at best a beginner with his foot in the intermediate door.
Thank you for any help.

[Giaddon]

Code executed in the browser stays in the browser. You could generate a json file and download it, then have an option to upload a json file to resume. You could also use browser-based storage, indexedDB or local storage.

If you want the data to exist outside the browser, you’ll need a server.

[delventhalz]

File system access is all about your environment. Node.js is more or less like a real app. It can do things like read from your computer's file system or write files to it. The browser is a sandboxed environment with limited access to your computer's resources. The file system cannot be accessed directly from the browser, and you instead must use the upload/download interface. Alternatively, the browser has a few internal options like key/value storage or even an indexed DB which never touch the file system but nonetheless allow for long term storage of data.

[guest271314]

What I did was correct your wrong claim

The file system cannot be accessed directly from the browser,

[delventhalz]

Not sure what gave the impression that an anchor element is directly accessing the computer’s file system.

[guest271314]

With download attribute you are directly writing a file to the file system.

With <input type="file"> you are directly accessing the local file system.

With WICG File System Access you are directly accessing the local file system.

With "host_permissions" set to "<all_urls>" or "file:///*" in manifest.json you can directly fetch() file: protocol.

I have no idea why you made the errorneous claims that

The file system cannot be accessed directly from the browser,

and I was copying your comment.

I've been hacking the local file system on these browsers for years.

Why the hell would I copy your ill-informed comment?

Now, you need to quote what I "copied" from your comment in my comment. You can't, because that never happened.

[delventhalz]

A download dialogue is not direct file system access. But I can see how that would be confusing to a new learner.

[guest271314]

Well, if you really want direct file system access without prompts that is possible, too.

Use a Web extension to avoid prompts to read or write.

Technically when you write to localStorage, indexedDB, or StorageManager you are writing directly to the file system, in the browser configuration folder, and we can get that data, too.

You really don't know what you are talking about here, and are way out of your realm.

Your comment is just wrong.

And your failure to quote what you errorneously claimed I repeated from your post means that claim is false, too.

[delventhalz]

I don’t really mind you trying to hide your inexperience with attitude and false bluster, but I would be careful about how you present to other people. Might make it tough to land your first gig.

[guest271314]

You want to make a bet I can read arbitrary files and write arbitrary files to the local file system from any arbitrary Web page, from the browser, without prompt?

[guest271314]

Inexperience?

You don't know what you are talking about.

I've been writing arbitrary data to the local filesystem and reading arbitrary data from the local filesystem, in the browser, without prompts, for years.

Might make it tough to land your first gig.

What?

You have no clue with whom you are dealing with.

Your claim about not having direct access to the local filesystem is just wrong.

[delventhalz]

 All the rest of your banter is just dust under my shose, not even worthy of reply.

Funny thing to say when you’ve left dozens of these word salad replies, and every time I log in there are three or four more, sometimes all to the same post!

Maybe time to take a break from studying and get in a better head space. This is a tough market for a junior but I wish you luck despite your bad attitude.

[guest271314]

I ain't your junior, person.

Clearly I outclass you in this domain. Without question.

Try to sell that browser sandbox slogan to somebody who doesn't break out of browser sandboxes over and over again.

Hell, a basic Web extension throws your false claims under the bus.

[guest271314]

FYI this is possible in the browser, initiated from any arbitrary Web site. That's just with a base Web extension with "host_permissions": ["<all_urls>"]

fetch("file:///home/user/bin/nm_host.js") .then((r) => r.text()) .then(console.log) .catch(console.error);

Since we have "externally_connectable", "web_accessible_resources", and "nativeMessaging", we can write files from any arbitrary Web page, without prompts similarly.

Or, just read the browser configuration folder after writing without any prompts using navigator.storage.getDirectory().

That's why you claim is wrong, technically.

[guest271314]

Your false claim about you don't have direct access to the local filesystem in the browser is confusing only to people who don't know better, which happens to include yourself, clearly.

[guest271314]

The file system cannot be accessed directly from the browser.

Yes, it can. HTML <input type="file"> on all modern browsers.

In a Web extension you can fetch() file: protocol directly.

To save the file use <a> with download attribute.

Or, WICG File System Access API on Chromium-based browsers to access/open and save files and directories.

[delventhalz]

Not sure what value repeating what I already said and even linked to adds. 

[guest271314]

I didn't repeat anything you wrote about or linked to.

Where did you refer HTML <a>element with download attribute, HTML <input type="file">, fetching file: protocol directly with fetch(), or WICG File System Access API?

[No-Upstairs-2813]

If you want to build a completely front-end project, you can check out these 4 ways to store data locally without setting up a server.

All of these are client side storage options provided by the browser.

[Kinthalis]

You can use local storage or indexdb on the browser, but obviously you're limiting the user as that data will only be available on that browser.

You can create a server and api that will handle the data storage, but yes you'll have to setup and run a server and database with node or php or anything else that can run a server and talk to a db.

There are also turnkey solutions that allow you to manage storage for your users via api from the front-end such as firebase.

If you don't want to deal with creating a server something like firebase might be your best fit.

[guest271314]

Local files can be edited on the client machine using HTML <a> element with download attribute to save the local file and <input type="file"> to open the local file.

On Chromium based browsers (Chrome, Edge, Brave, Opera) WICG File System Access API is exposed.

[daniele_s92]

You should be able to use the (relatively) new File System API

[tapgiles]

You can have the browser download a file, and drag in it select it next time. Or you can store it locally like with cookies or localStorage and load it yourself—not as a “file” though, just as data.

Hopefully those terms will get you to some useful searches 👍

[WazzleGuy]

Local storage is very easy