notepad.html

<!DOCTYPE html>
<html lang="en-us">
<head>
    <title>Web Notepad</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="Just a text area to type stuff and save it **locally**"/>
    <meta charset="UTF-8"/>
    <style>
        body {
            height: 100%;
        }

        textarea {
            width: 100%;
            height: 100vh;
            font-family: Consolas, 'Courier New', Courier, monospace;
            font-size: x-large;
        }
    </style>
    <script>
        "use strict";

        function saveText() {
            const data = document.getElementById('t').value;
            window.localStorage.setItem("data", data);
        }

        function loadText() {
            document.getElementById('t').value = window.localStorage.getItem("data");
        }

        function handleTab() {
            document.getElementById('t').addEventListener('keydown', function (e) {
                if (e.key === 'Tab') {
                    e.preventDefault();
                    const start = this.selectionStart;
                    const end = this.selectionEnd;
                    // set textarea value to: text before caret + tab + text after caret
                    this.value = this.value.substring(0, start) + "\t" + this.value.substring(end);
                    // put caret at right position again
                    this.selectionStart = start + 1;
                    this.selectionEnd = start + 1;
                }
            });
        }

        function initialize() {
            handleTab();
            loadText();
            window.setInterval(saveText, 500);
        }

    </script>
</head>
<body onload="initialize();">
<textarea id="t" autocomplete="off"></textarea>
</body>
</html>