<html>
<head>
    <title>
        To-Do List
    </title>
    <script type="text/javascript">
        function saveEdits() {
        //get the editable element
        var editElem = document.getElementById("edit");
        //get the edited element content
        var userVersion = editElem.innerHTML;
        //save the content to local storage
        localStorage.userEdits = userVersion;
        }
        function checkEdits() {
        //find out if the user has previously saved edits
        if(localStorage.userEdits!=null)
            document.getElementById("edit").innerHTML=localStorage.userEdits;
        }
        window.onbeforeunload = function() {saveEdits()}
        setInterval(function(){saveEdits()},30000);
    </script>
    <style>
        body {
        background-color:floralwhite;
        }
        #edit {
        border-style:dotted;
        border-width:1px;
        position:absolute;
        top:40px;
        width: 80%;
        font-family:"Andale Mono", Helvetica, sans-serif;
        font-size:200%;
        background-color:white;
        }
        #stuff {
        width: 80%;
        margin-left:auto;
        margin-right:auto;
        }
    </style>
</head>
<body onload="checkEdits()">
    <div id="stuff">
        <div id="edit" contenteditable="true">

        </div>
    </div>
</body>
</html>