案例：TodoList待办事项的实现

// An highlighted block
$(function() {
    load();
    $('#title').keydown(function(e) {
        if (e.keyCode == 13) {
            if ($('#title').val().trim() == '') {
                alert('未输入待办事项');
                return;
            }
            var preData = getData();
            preData.push({ title: $('#title').val(), done: false });
            localStorage.setItem('todolist', JSON.stringify(preData));
            $('#title').val('');
            load();
        }
    })
    $('ul,ol').on('click', '.del', function() {
        var preData = getData();
        preData.splice($(this).attr('index'), 1);
        localStorage.setItem('todolist', JSON.stringify(preData));
        load();
    })
    $('ul,ol').on('click', '.fresh', function() {
        var fresh = prompt('输入修改的内容');
        if (!fresh) return;
        var preData = getData();
        preData[$(this).attr('index')] = { title: fresh, done: $(this).siblings('input').prop('checked') };
        localStorage.setItem('todolist', JSON.stringify(preData));
        load();
    })
    $('ul,ol').on('click', 'input', function() {
        var preData = getData();
        preData[$(this).siblings('a').attr('index')].done = $(this).prop('checked');
        localStorage.setItem('todolist', JSON.stringify(preData));
        load();
    })

    function load() {
        var preData = getData();
        $('ul,ol').empty();
        $.each(preData, function(index, domEle) {
            var li = $('<li></li>');
            li.html('<input type="checkbox">' + domEle.title + '<a class="fresh" href="javascript:;" index=' + index + '></a>' + '<a class="del" href="javascript:;" index=' + index + '></a>');
            li.children('input').prop('checked', domEle.done);
            domEle.done ? $('ul').prepend(li) : $('ol').prepend(li);
        })
        $('#todocount').text($('ol li').length);
        $('#donecount').text($('ul li').length);
    }

    function getData() {
        if (localStorage.getItem('todolist') != null) {
            return JSON.parse(localStorage.getItem('todolist'));
        } else return [];
    }
})

上面实现了类似一个备忘录的小功能。
核心原理是利用本体存储一个数组todolist，这个数组的成员存储的是对象，包括title和down两个属性值。
在键盘事件keydown和input的change事件触发以后，会改变数组todolist的值，此时通过load会重新渲染。