Local Storage - Content Editable

Add some items, and refresh the page. It'll remember what you typed. Then clear the changes if you want to start again.

Here's an editable paragraph element

You can edit this list too
Yes you can, honest
Then refresh the page and it'll still be here!

Local Storage Code Snippet

1. CSS

<style>
    [contenteditable] {
        outline: 1px dotted #444;
        padding: 0.5em 1.5em;
    }
    .storage-list {
        font-size: 1.5em;
    }
    #clear-storage {
        margin-top: 1.5em;
        padding: 0.25em;
    }
</style>

2. HTML

<section id="edit" contenteditable="true">
    <p>Here's an editable paragraph element</p>
    <ul class="storage-list">
    <li>You can edit this list too</li>
    <li>Yes you can, honest</li>
    <li>Then refresh the page and it'll still be here!</li>
    </ul>
</section>
<input type="button" id="clear-storage" value="Clear changes" />

3. JavaScript

//Remy Sharps script to add the event
<script src="http://html5demos.com/js/h5utils.js"></script>
<script>
    $(function () {
        var edit = document.getElementById('edit');

        $(edit).blur(function () {
            localStorage.setItem('todoData', this.innerHTML);
            document.designMode = 'off';
        });
        addEvent(edit, 'focus', function () {
            document.designMode = 'on';
        });
        // to reset
        addEvent(document.getElementById('clear-storage'), 'click', function () {
            localStorage.clear();
            window.location = window.location; // refresh
        });
        // when the page loads
        if (localStorage.getItem('todoData')) {
            edit.innerHTML = localStorage.getItem('todoData');
        }
    });
</script>