本文将指导您如何使用HTML5的localStorage特性来构建一个简易的在线记事本应用。此应用允许用户保存笔记以及笔记创建的具体时间，即使在浏览器关闭或页面刷新之后，也能恢复之前的所有笔记。

HTML结构

    
    
    


    
新增笔记

    

    
    
    
    
笔记列表

    

    

Javascript逻辑

function saveNote() {
    var cOntent= document.getElementById('noteContent').value;
    if (content.trim()) {
        var timestamp = new Date().toISOString();
        localStorage.setItem(timestamp, content);
        loadNotes();
    } else {
        alert('请输入笔记内容！');
    }
}

function loadNotes() {
    var notesDiv = document.getElementById('notesList');
    notesDiv.innerHTML = '';
    for (var i = 0; i         var key = localStorage.key(i);
        if (new Date(key) instanceof Date && !isNaN(new Date(key))) {
            var note = localStorage.getItem(key);
            notesDiv.innerHTML += '
' + key + ': ' + note + '
';
        }
    }
}

function clearNotes() {
    localStorage.clear();
    document.getElementById('notesList').innerHTML = '';
    alert('所有笔记已清除。');
}

以上代码片段展示了如何使用HTML5的localStorage来存储用户的笔记数据。通过简单的Javascript函数，我们实现了笔记的保存、加载和删除功能。每个笔记都关联了一个唯一的时间戳，这不仅帮助区分不同的笔记，还方便了用户查看笔记创建的时间。