Javascript – save / update content

Posted on

Question :

Well, my question is: I would like to know if it is possible to update the contents of a file in general.

Example: I have a file called name.html and inside it I have a <h1>nome</h1> , I would like to do a function that when I want to javascript I can change from ‘name’ to ‘ good morning ‘and save the content so that re-opening the name.html file is written: <h1>bomdia</h1>
Is it possible to do this with javascript? some example of how to do?


Answer :

Yes, it is possible.

You can use LocalStorage to store local content via setItem() method, and get it back via getItem() . The code below exemplifies this functionality:

  function dataSave(){
    var refVal = document.getElementById("valInput");
    localStorage.setItem("valor", refVal); // Salva o valor

  function dataGet(){
    var valorTemp = localStorage.getItem("valor") || 'nome'; // Carrega o valor, 
                                                             // com um default caso 
                                                             // este não exista
    document.getElementById('template').innerHTML = valorTemp;
    document.getElementById('valInput').value = valorTemp;
<body onLoad="dataGet();">
  <h2 id='template'>placeholder</h2>

    <input type="text" id="valInput" placeholder="Valor a salvar">
    <button onClick="dataSave();">Salvar</button>


Only with HTML / javascript does not. HTML is a static set of tags and text, the only way you can “save” a change to a file of this type is to edit it, either with a text editor or with a programming language like C, php, etc. Ok you have javascript at disposal, but this does not help you since the html file is on an external server and JS runs directly in the browser, different places. Even if you are opening your .html locally you would not be able to change the file because a lot of restrictions are imposed by browsers for what javascript code can do on the user’s machine, and changing files is one of them.

If you are loading the html through an http server (apache, nginx) it would be possible to do a hassle with #


As BrunoRB said, you probably will not be able to do what you want by using HTML / Javascript only. But if your .html page is on your server and you have access, you could change it using just javascript, but it would not be the user’s browser engine, but through Node.JS, which is the Chrome Engine V8 running in the server.

If you want to change the source code of a page, you basically have two alternatives, or change it on the server, before sending the response to the client (in this case you could use NodeJS), or you change dynamically in the client using Javascript, which is actually not a true change in the source code but only a manipulation of the document in the client.

You could also do something complex, like creating a copy of the .html file in the client’s storage using FileAPI with another series of processes that would get more or less the result you expect, but I think that’s not quite the what do you want.

Finally, the javascript code that you run in the client browser does not have direct access to your files on the server, ie you could not just use it to modify your source code. But there are ways to get this result, modify the source code of a page with javascript, but this involves more technologies than just HTML / Javascript running in the browser.


Leave a Reply

Your email address will not be published. Required fields are marked *