原生js實現一個簡單的備忘錄

實現目標:

• 可編輯文本
• 刷新頁面不清除

效果：

實現的原理比較簡單，我就直接貼代碼了

Html: 一個可編輯的div

<div class="edit-book" id="remember" contenteditable="true" style="outline: none">
      <!-- 今天要按時吃飯 -->
</div>

Js：監聽keyup事件緩存內容

//偷個懶直接用jQuery語法了
function initBook () {
    var storage;
    if (window.localStorage) {
        storage = window.localStorage;
    } else if (window.sessionStorage) {
        storage = window.sessionStorage;
    } else {
        $('#remember').html('您的瀏覽器版本也太老了!');
        $('#remember').attr('contenteditable', false);
        return false;
    }
    var history = '';
    if (storage.getItem('memo')) {
        history = storage.getItem('memo');
    } else {
        history = '點擊我新建備忘錄';
        storage.setItem('memo', '點擊我新建備忘錄');
    }
    $('#remember').html(history);
    $('#remember').keyup(function(){
        var html = $(this).html();
        storage.setItem('memo', html);
    });
}