项目示例
演示地址：https://tools.bleaz.top/notebook
项目概述
此在线笔记本应用具有以下功能：
- 添加笔记：用户可以在文本框中输入笔记内容，点击“添加笔记”按钮将笔记保存并显示在页面上
- 删除笔记：用户可以删除不再需要的笔记
- 持久化存储：笔记会保存在浏览器的
localStorage中，即使页面刷新或关闭，笔记也不会丢失 - 首次访问提示：当用户第一次访问页面时，会显示一条提示消息，提醒用户不要清除浏览器缓存，否则笔记将丢失
技术栈
- HTML：用于构建页面结构
- CSS：用于美化页面样式
- JavaScript：用于实现交互逻辑和数据存储
- Materialize CSS：一个基于 Material Design 的 CSS 框架，用于快速构建美观的 UI
代码实现
1. HTML 结构
HTML 部分定义了页面的基本结构，包括导航栏、笔记输入框、笔记显示区域和页脚
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线笔记本</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.admincdn.com/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<style>
/* 自定义样式 */
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.note-card {
margin: 10px;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
}
.note-card .delete-note {
cursor: pointer;
color: #ff4444;
}
</style>
</head>
<body>
<header>
<nav class="blue lighten-1">
<div class="nav-wrapper container">
<a href="#" class="brand-logo">在线笔记本</a>
</div>
</nav>
</header>
<main class="container">
<div class="row">
<div class="col s12">
<div class="input-field">
<textarea id="note-input" class="materialize-textarea" placeholder="输入你的笔记..."></textarea>
</div>
<button id="add-note-btn" class="btn waves-effect waves-light blue">添加笔记</button>
</div>
</div>
<div class="row" id="notes-container">
<!-- 笔记将在这里显示 -->
</div>
</main>
<footer class="page-footer blue lighten-1">
<div class="container">
<div class="row">
<div class="col s12">
<p class="white-text">© 2025 PixelByte</p>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.admincdn.com/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// JavaScript 逻辑
document.addEventListener('DOMContentLoaded', function() {
const notesContainer = document.getElementById('notes-container');
const noteInput = document.getElementById('note-input');
const addNoteBtn = document.getElementById('add-note-btn');
// 检查是否是第一次访问
if (!localStorage.getItem('hasVisited')) {
// 显示提示消息
M.toast({
html: '请注意不要清除浏览器缓存，否则所有笔记将丢失。',
classes: 'blue lighten-1',
displayLength: 5000 // 提示消息显示5秒
});
// 标记用户已经访问过
localStorage.setItem('hasVisited', true);
}
// 加载保存的笔记
loadNotes();
// 添加笔记
addNoteBtn.addEventListener('click', function() {
const noteText = noteInput.value.trim();
if (noteText) {
addNoteToDOM(noteText);
saveNote(noteText);
noteInput.value = '';
}
});
// 删除笔记
notesContainer.addEventListener('click', function(e) {
if (e.target.classList.contains('delete-note') || e.target.closest('.delete-note')) {
const noteCard = e.target.closest('.note-card');
const noteText = noteCard.querySelector('p').innerText;
noteCard.remove();
removeNote(noteText);
}
});
function addNoteToDOM(noteText) {
const noteCard = document.createElement('div');
noteCard.className = 'col s12 m6 l4 note-card';
noteCard.innerHTML = `
<p>${noteText}</p>
<a class="delete-note"><i class="material-icons">delete</i></a>
`;
notesContainer.appendChild(noteCard);
}
function saveNote(noteText) {
let notes = JSON.parse(localStorage.getItem('notes')) || [];
notes.push(noteText);
localStorage.setItem('notes', JSON.stringify(notes));
}
function loadNotes() {
let notes = JSON.parse(localStorage.getItem('notes')) || [];
notes.forEach(note => addNoteToDOM(note));
}
function removeNote(noteText) {
let notes = JSON.parse(localStorage.getItem('notes')) || [];
notes = notes.filter(note => note !== noteText);
localStorage.setItem('notes', JSON.stringify(notes));
}
});
</script>
</body>
</html>2. CSS 样式
我们使用 Materialize CSS 框架来快速构建美观的 UI，同时添加了一些自定义样式来美化笔记卡片和页面布局
3. JavaScript 逻辑
JavaScript 部分负责处理用户交互和数据存储：
- 添加笔记：用户输入笔记内容后，点击“添加笔记”按钮，笔记会被添加到页面并保存到
localStorage中 - 删除笔记：用户可以点击删除按钮删除笔记，笔记会从页面和
localStorage中移除 - 首次访问提示：当用户第一次访问页面时，会显示一条提示消息，提醒用户不要清除浏览器缓存
4. 数据持久化
我们使用 localStorage 来保存用户的笔记。localStorage 是浏览器提供的一种持久化存储方式，即使页面刷新或关闭，数据也不会丢失
功能亮点
1. 首次访问提示
当用户第一次访问页面时，会显示一条提示消息，提醒用户不要清除浏览器缓存。这是通过检查 localStorage 中是否存在 hasVisited 标记来实现的。如果不存在，则显示提示消息并设置标记
if (!localStorage.getItem('hasVisited')) {
M.toast({
html: '请注意不要清除浏览器缓存，否则所有笔记将丢失！！！',
classes: 'blue lighten-1',
displayLength: 5000
});
localStorage.setItem('hasVisited', true);
}2. 笔记的添加与删除
用户可以通过点击“添加笔记”按钮将笔记添加到页面，并通过点击删除按钮删除笔记。删除操作会同时从页面和 localStorage 中移除笔记
// 添加笔记
addNoteBtn.addEventListener('click', function() {
const noteText = noteInput.value.trim();
if (noteText) {
addNoteToDOM(noteText);
saveNote(noteText);
noteInput.value = '';
}
});
// 删除笔记
notesContainer.addEventListener('click', function(e) {
if (e.target.classList.contains('delete-note') || e.target.closest('.delete-note')) {
const noteCard = e.target.closest('.note-card');
const noteText = noteCard.querySelector('p').innerText;
noteCard.remove();
removeNote(noteText);
}
});3. 数据加载
页面加载时，会从 localStorage 中读取保存的笔记并显示在页面上
function loadNotes() {
let notes = JSON.parse(localStorage.getItem('notes')) || [];
notes.forEach(note => addNoteToDOM(note));
}总结
通过这个简单的在线笔记本应用，我们展示了如何使用 HTML、CSS 和 JavaScript 构建一个功能完整的 Web 应用。这个项目不仅涵盖了基本的用户交互和数据存储，还引入了 Materialize CSS 框架来快速构建美观的 UI
发表回复