javascript - HTML page that save its content, replacing the HTML file itself - Stack Overflow

admin 管理员组

文章数量: 1086019

I've to create a html page that auto-save its content.

This page is just a report of the activities of 4 days, that should be updated by some user.

This page will be used just for 3/4 days (Go live summary status page, and this say i all).. So I don't wanna lose time with backend, but I wanna do something like a trick just on client side, Javascript and HTML.

What I would like to do:

A user access to the page, this page is published on our internal server, update the status of the task and save the page! I thought to do this in two ways:

• Any time I press the save button it just replace the old html content with the new one (replacing the html file itself)
• Save the content in a plan file that will be loaded everytime the page is used, this second option obviously costs a lot of more work..

Any suggestion? I meant, is there something that help me doing this in just few time? I've about 2 days to finish this :(

UPDATE: Guys maybe i'm not explaining myself so good, am i thinking so wrong if i suppose just something like this:

Javascript function that when you click the save button replace the old html server file with the new one containing the row updated...

Easy easy easy...! I'm a backend developer.. not a lot of experience with beautiful styled front end pages :)

UPDATE: By your answer i'm assuming that is NO WAY to do this, without a backend side logic, even if light one, but its not possible to achieve this just with a client side scripting.. I already thought at this, but i was hoping there is some kind of trick that allows to do this without place anything on the server side.. :(

I've to create a html page that auto-save its content.

This page is just a report of the activities of 4 days, that should be updated by some user.

This page will be used just for 3/4 days (Go live summary status page, and this say i all).. So I don't wanna lose time with backend, but I wanna do something like a trick just on client side, Javascript and HTML.

What I would like to do:

A user access to the page, this page is published on our internal server, update the status of the task and save the page! I thought to do this in two ways:

• Any time I press the save button it just replace the old html content with the new one (replacing the html file itself)
• Save the content in a plan file that will be loaded everytime the page is used, this second option obviously costs a lot of more work..

Any suggestion? I meant, is there something that help me doing this in just few time? I've about 2 days to finish this :(

UPDATE: Guys maybe i'm not explaining myself so good, am i thinking so wrong if i suppose just something like this:

Javascript function that when you click the save button replace the old html server file with the new one containing the row updated...

Easy easy easy...! I'm a backend developer.. not a lot of experience with beautiful styled front end pages :)

UPDATE: By your answer i'm assuming that is NO WAY to do this, without a backend side logic, even if light one, but its not possible to achieve this just with a client side scripting.. I already thought at this, but i was hoping there is some kind of trick that allows to do this without place anything on the server side.. :(

• javascript
• jquery
• html

Share Improve this question Follow edited Jun 17, 2016 at 12:12 ivoruJavaBoy asked Jun 17, 2016 at 10:10 ivoruJavaBoyivoruJavaBoy 1,35722 gold badges2020 silver badges4242 bronze badges 2

• What you want is a progressive web app. Here is some kind of documentation: developers.google./web/progressive-web-apps – Werner Commented Jun 17, 2016 at 10:15
• Yhea it sounds really intersting, but i would like to keep it simple, just using javascript... I meant should not be so hard to find a javascript function that just save the html page content in an html file and save it to the filesystem... – ivoruJavaBoy Commented Jun 17, 2016 at 10:18

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

Finally, because we can use PHP we decided to do this: we put this in a file called "prova.php" and we launch this. This file shows the content of 'file.html' and save in 'salva.php' sending the data to save.

 <?php include('file.html');?> 

 some added string
 </div> 

 <button onclick="save()">SAVE</button> 

 <script> 


 function save(){ 

 var newData=document.getElementById("myText").innerHTML; 
 $.post( "salva.php", { data: newData} ); 
 } 
 </script>

The file to save called salva.php, receive the string and save in an existing file called "file.html".

<?php


$stringa=$_POST['data'];

$ourFileName = "file.html";
$ourFileHandle = fopen($ourFileName, 'w') or die("can't open file");
fwrite($ourFileHandle,$stringa);
fclose($ourFileHandle);


?>

file.html is a file that contains nothing at the beginning

You can do a timed ajax request every 2 minutes asking for new content and replacing that into the <body> tag.

I remend to use jQuery for this as it helps you do this pretty easily: http://api.jquery./jquery.ajax/

You can use Web Storage to store the data in the user's local end. And its pretty easy and supported by most modern browsers.

There are two "mechanisms" for using Web Storage.

1. sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores)
2. localStorage does the same thing, but persists even when the browser is closed and reopened.

Update:- If you want to store data on server but donot want to bother with full fledged database servers then maybe you could use "SQLite". Basically its just runs off of a file.

<html>
    <head>
        <title>Button Writer</title>
    </head>

    <body onload="read()">
         <!--<button onclick="writeInFile()">Save</button> -->
         <input type="button" id="somebutton" onclick="addText()">
         <input type="text" id="myText" placeholder="Enter Name Here">
         <div id="text2"></div>
    </body>


    //read a file and write content in text2 div, please set your path
<script>

function read(){
var xhr;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

xhr.onreadystatechange = function(){document.getElementById("text2").innerHTML=xhr.responseText;};
xhr.open("GET","file.txt"); //SET YOUR PATH
xhr.send();
}

function addText()
        {
            document.getElementById('text2').innerHTML += document.getElementById('myText').value;
        }



</script>
</html>

To write in file you should use AJAX + PHP. If you want I'll tell you how

To directly address your updated question: No, there is no way to write to the server filesystem without establishing something on the server back-end to handle that. the way http security works, the client doesn't get access to the server like that. However, there are multiple back-end (or "middle-tier") systems you can set up to handle this. One old method was something called WebDAV. You can search for a WebDAV implementation for your preferred platform - there are several (including some server-side javascript-based ones.)

本文标签： javascriptHTML page that save its content replacing the HTML file itselfStack Overflow