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>