Is it possible to update JSON data in a webpage?

My meaning is I press a button (in the webpage) which executes an addEventListener() function. After that, the function changes some JSON data and saves that. Then, in the future, people could access the JSON data.

An example is a login/register page deployed using Netlify.

So I first have a simple file system:

login-register-project:
    - index.html
    - db.json
    - login-page:
        - login.html
        - login.js
    - register-page:
        - register.html
        - register.js
    - home-page:
        - hub.html
        - hub.js

Inside db.json has:

{
    "username":{
        "pw":"password",
        "login_bool":false
    }
}

home-page is the page displayed after login or register is complete.

index.html sends the user to register-page's register.html. There would then be a login instead option in there, which the user can use to choose either to register or login.

After filling in register.html's register details and clicking the "sign in" button, register.js would then put the data into db.json, sets login_bool to true and redirect the user to https://websitename.com/home-page/hub.html?{user's usrname}|{user's pw}

Alternatively, after filling in login.html's login details and clicking the "login" button, login.js would then set login_bool to true and redirect the user to https://websitename.com/home-page/hub.html?{user's usrname}|{user's pw}.

hub.html then checks whether the username and password data given were correct and checks if login_bool was set to true. If all information is correct, the website displays its contents. If login_bool was set to false or the username/password were incorrect, the user will be redirected to index.html

BTW, there will be a "log out" button in hub.html that lets users to "log out" and sets login_bool to false.

Now, if this works, then how would I retrieve the data from the JSON file deployed and copy it to my JSON file so that when I deploy a new update, no data will be lost?

If I missed anything/my information was incorreect/you require furthur information, please tell me.

Thanks to anyone who answers.

Solution

Short answer: Your logic is correct but that's not how it works on Netlify. I'd rather advise using an external database to store this data.

Long answer: Netlify's deploys are immutable once published. This means that, any change that you wish to push to your site's code, would have to trigger a new deploy and upload those changes. While you can possibly use Netlify API to handle updating your site on-the-fly (like on a click of the button), this would be an overkill for the task you're trying to achieve, not to mention a bit difficult. The flow would look something like:

Fetch the list of files in the current deploy
Hash the new files that you wish to upload as SHA1
Create a new deploy with the list of previous files + new file that you wish to upload
Upload the new file
Wait a few seconds for the deploy to go live
Fetch the data from the updated site

Even if you manage to do all this, this would definitely be much slower, not to mention difficult to manage in case of concurrent read/writes.