Chalkboard

chalkboard.markdown

Chalkboard

This is a lightly styled textarea that remembers what you type even if you reload the page or close your browser. Behold the power of HTML5 Local Storage!

A Pen by Mark Hillard on CodePen.

License.

index.html

<textarea id="edit" placeholder='Place your cursor in here and type away! Any changes you make will be saved on "change", "keyup", "focusout", "input" and "paste" events. Your previous edits will persist even if you reload the page or close your browser.'></textarea>

script.js

/*! HTML5 Local Storage Functions */

$(document).ready(function () {
    if (typeof (localStorage) === 'undefined') {
        alert('Your browser does not support HTML5 Local Storage. Your changes will not be saved.');
    } else {
        $('#edit').each(function () {
            var save = $(this).attr('name');
            var content = localStorage.getItem(save);
            if (content !== null) {
                $(this).val(content);
            }
            // save value in <textarea> on "change", "keyup", "focusout", "input" and "paste" events...
            $(this).bind('change keyup focusout input paste', function () {
                localStorage[save] = $(this).val();
            });
        });
    }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

style.css

@import url("//fonts.googleapis.com/css?family=Architects+Daughter");

html,body {
background-color:#333;
font-size:16px;
height:100%;
margin:0;
padding:15px;
}

*,::before,::after { box-sizing:border-box; }

textarea { appearance:none; background:none; }
textarea:focus { outline:none }

#edit {
background-color:#333;
border:none;
color:#fff;
display:block;
font-family:"Architects Daughter", arial, sans-serif;
font-size:150%;
height:100%;
margin:0;
overflow:auto;
padding:0;
resize:none;
width:100%;
}