Is it possible to write data in JSON file without AJAX or backend?

Question

I´m developing an small test app and I had a doubt about JSON in frontend.

I´m working with React and I´m using a JSON file as a small testing DB, saving only 1 user. The fact is that I want to write more users there and edit the JSON registers.

Is that possible without backend or AJAX?

**EDIT: **

I´m using localStorage for the actual logged in user and it´s moves, at the end need to save it´s data before I close session and localStorage loses.

When you close the browser or the tab, the data inside localStorage should not be lost. Be sure to use localStorage and not sessionStorage — josemartindev, Mar 10 '21 at 13:22
Oh true, I missed something in the edit, when I close session I clean the localStorage data, using it as a login "flag" — B2DAW, Mar 10 '21 at 13:25
@charlietfl the fact is that I need only front-end without external services — B2DAW, Mar 10 '21 at 13:26
Many are free and take next to no time to set up for test app — charlietfl, Mar 10 '21 at 13:28

josemartindev · Accepted Answer · 2021-03-10T13:44:35.277

1

AJAX is used for HTTP requests between a front-end (ex: ReactJS, VueJS) and a back-end (ex: NodeJS/Express, Python/Flask).

If you're using a JSON variable, the data will be deleted everytime the website refreshes. If you're using a JSON file, you can't access the file system from the browser for security reasons.

What I recommend to use is localStorage, which acts as a local database for front-end ONLY per browser (per user). The most common usage is:

The setter:

localStorage.setItem('name', 'John')

The getter:

const name = localStorage.getItem('name');
console.log(name) // John

In React, you could set and update data as the following in this example I made:

DEMO https://stackblitz.com/edit/react-fctts3

edited Mar 10 '21 at 13:44

answered Mar 10 '21 at 13:18

josemartindev

1,413
9
17

Thanks for the answer @josemartindev, the fact is that I should use Redux for this things, but honestly I don´t know how to use it (need to study it). The fact is that I´m only developing frontend on this test and I need something to save the data, create new users and modify their values. – B2DAW Mar 10 '21 at 13:20
1

Before learning Redux, try first using React's state + localStorage. When you modify state, save in localStorage as well. Be sure to set state and set localStorage before entering components as well (using useEffect or componentDidMount) – josemartindev Mar 10 '21 at 13:21
The fact is what I´ve updated in my question, I´m using localStorage, but I need to create more users and modify their datas (something simple, plain data) I´m also using states but I didn´t get it at all . – B2DAW Mar 10 '21 at 13:24
@josemartindev your answer is the closest to the fact I want to get, but still looking for an answer – B2DAW Mar 10 '21 at 15:07
1

@B2DAW When you say **"Save data before I close session"**, to save this data you actually NEED a back end in order to save the data in a JSON file or in a Database, because with React you can't access the file system. – josemartindev Mar 10 '21 at 15:14
1

@josemartindev you´re right, I will save it all in localStorage, is the easiest solution, thanks man! – B2DAW Mar 10 '21 at 15:22

Iman Akrami · Answer 2 · 2021-03-10T13:32:05.770

Short answer, no. you can't write data directly to client's disk. but there are workarounds. one way is using common browsers storage options. such as localstorage:

localStorage.setItem(keyname, value)

Is it possible to write data in JSON file without AJAX or backend?

2 Answers2