How do you collect data from a local HTML file with a form and store it locally(so that there is no need to worry about servers)?

Here is the problem: I want to make an HTML form in a local file(as a sort of UI), and then save data from that form into a JSON file(preferably, other file types are OK as well). I assume a JavaScript is needed in the HTML to do something with the form. From another thread(How to use HTML forms without a server), I heard about a $_GET function, but it was not clearly explained and didn’t work when I copied the example code into an HTML editor. It was also missing the explanation for how to write it to a file, probably because JS on the web can’t write a file on your client computer. In this scenario, however, my goal is to have the entire thing stay local. This was one of the solutions presented by the other thread:

<script language="javascript">
function $_GET(q,s) {
    s = s ? s : window.location.search;
    var re = new RegExp('&'+q+'(?:=([^&]*))?(?=&|$)','i');
    return (s=s.replace(/^?/,'&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined;
} 

var usersName = $_GET('username');
if(typeof(usersName)!='undefined'){
    document.write('<h1>Hi there, '+usersName+'</h1>');
}

</script>
<form>
     <input type="text" name="username" />
     <input type="submit" value="Say my name" />
</form>
However, this threw an error when I tried to use it(if you hit run snippet it should show you the error) , and again, doesn’t provide how to write the data to a file. Is there a simple way to collect the data from the form and save it to a file, with no services like wordpress, no servers, entirely locally? Let me know if there is more information I could be providing

Answer

I think I have solved this. The code snippet I put in my question had one small error(other than being unclear to those inexperienced in JS like myself). I found the error, and it was probably caused by that code snippet being out of date. Essentially, the answer is that when you submit the form, the URL(or filepath if local) gets appended with a url encoded argument showing the data entered(e.g. index.html?username=testUserName). Here is the code snippet, with comments showing what the annoyingly complex script does(or at least it worked on my computer):

<!DOCTYPE html>
<body>
        <form>
             <input type="text" name="username" />
             <input type="submit" value="Say my name" />
        </form>
        <script language="javascript">
            function $_GET(q,s) {
                s = s ? s : window.location.search;//This line says that if the queryString parameter is given, it stays, if not, it is set as the url or file path of the current html doc
                var re = new RegExp('&'+q+'(?:=([^&]*))?(?=&|$)','i');//this line creates a pattern of characters that is url encoded to get attributes from the url. All the stuff after q+ basically decides whether the argument is the beginning of the url args, and so whether to add a ? or an &
                return (s=s.replace(/^?/,'&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined;//the first part replaces the url starter ? with an &, then returns all strings that match that, such that if all works, index 0 will be the url argument starting with &, and index 1 will be the actual input value. If it is undefined, it is returned as undefined. If not, the method returns the value that was entered 
            } 
            
            var usersName = $_GET('username');
            if(typeof(usersName)!='undefined'){
                document.write('<h1>Hi there, '+usersName+'</h1>');
            }
            
            </script>
</body>

Leave a Reply

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