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
– josemartindev, Commented Mar 10, 2021 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
– B2DAW, Commented Mar 10, 2021 at 13:25
@charlietfl the fact is that I need only front-end without external services — B2DAW
– B2DAW, Commented Mar 10, 2021 at 13:26

josemartindev · Accepted Answer · 2021-03-10 13:44:35Z

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, 2021 at 13:44

answered Mar 10, 2021 at 13:18

josemartindev

1,43610 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

B2DAW Over a year ago

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.

josemartindev Over a year ago

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)

B2DAW Over a year ago

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 .

josemartindev Over a year ago

@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.

B2DAW Over a year ago

@josemartindev you´re right, I will save it all in localStorage, is the easiest solution, thanks man!

|

Iman Akrami · Accepted Answer · 2021-03-10 13:32:05Z

1

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)

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related