How can I have a webpage access a text file, edit it and autosave? [closed]

What I would ultimately like to achieve is for the webpage to load the text file “list1.txt”, display the text, and make the text editable through the browser on the webpage, then whenever the text is edited I want it to autosave to the text file so next time someone loads the webpage it will continue where it left off.

        <div style="text-align:center">
        <iframe id="myFrame" src='list1.txt' scrolling='yes' height="800" width="400" frameborder="0"></iframe>

        <script>
        var frame = document.getElementById('myFrame');
            frame.onload = function () {
                var body = frame.contentWindow.document.querySelector('body');
                body.style.color = 'red';
                body.style.fontSize = '20px';
                body.style.lineHeight = '20px';
            };
        iframe.contentDocument.designMode = 'on';   
        </script>
        </div>

This is the code I have created so far. Simultaneously, my editing of the iframes property such as font colour are not changing.