网页版便签应用开发：HTML5本地存储与拖拽交互实践
文章目录
- 摘要
- 成品显示
- 核心功能与实现语法
- 1. 本地存储管理
- 2. 拖拽功能实现
- 3. 自动保存机制
- 4. 时间格式化处理
- 完整代码
摘要
本文详细介绍了一个基于HTML5的便签应用开发过程，重点讲解了如何利用localStorage实现数据持久化存储，以及如何实现流畅的拖拽交互体验。该应用具有创建、编辑、删除便签功能，自动保存用户内容，并支持多便签管理。文章将深入解析核心实现代码，并提供完整的开发案例。
成品显示
文章最后提供完整的代码，复制粘贴后保存为html文件，可以直接打开如下图，在网页上创建便签，随时记录，修改，删除，关闭网页，不删除便签。
核心功能与实现语法
1. 本地存储管理
使用localStorage实现便签数据的持久化存储：
note.operate = {// 存储便签数据set: function (id, content) {var notes = this.getNotes();if (notes[id]) {Object.assign(notes[id], content);} else {notes[id] = content;}localStorage.setItem(this.keyItem, JSON.stringify(notes));},// 获取便签数据getNotes: function () {return JSON.parse(localStorage.getItem(this.keyItem) || '{}');},// 删除便签remove: function (id) {var notes = this.getNotes();delete notes[id];localStorage.setItem(this.keyItem, JSON.stringify(notes));}
};
2. 拖拽功能实现
精准的拖拽位置计算和层级管理：
// 标题栏拖拽事件
titleBar.addEventListener('mousedown', function(e) {movedNote = note;var rect = note.getBoundingClientRect();startX = e.clientX - rect.left;startY = e.clientY - rect.top;// 提升当前便签的z-indexmaxZindex++;note.style.zIndex = maxZindex;
});// 全局鼠标移动事件
document.addEventListener('mousemove', function(e) {if (!movedNote) return;movedNote.style.left = (e.clientX - startX) + 'px';movedNote.style.top = (e.clientY - startY) + 'px';
});
3. 自动保存机制
使用防抖技术优化内容自动保存：
// 编辑区域事件
var inputTimer;
edit.addEventListener('input', function() {var content = edit.innerHTML;clearTimeout(inputTimer);inputTimer = setTimeout(function() {var time = Date.now();operate.set(that.note.id, {content: content,updateTime: time});that.updateTime(time);}, 500); // 500ms防抖延迟
});
4. 时间格式化处理
时间显示格式：
dateFormat: function (ms) {var d = new Date(ms);var pad = function (s) {return s.toString().padStart(2, '0');}return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
}
完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>便签应用</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);min-height: 100vh;padding: 20px;display: flex;flex-direction: column;align-items: center;}.header {text-align: center;margin-bottom: 30px;color: white;width: 100%;max-width: 1200px;}.header h1 {font-size: 3rem;margin-bottom: 10px;text-shadow: 0 2px 10px rgba(0,0,0,0.3);}.header p {font-size: 1.2rem;opacity: 0.9;max-width: 600px;margin: 0 auto;}#u-btn-create {background: #ff9a00;color: white;border: none;padding: 15px 35px;font-size: 1.2rem;border-radius: 50px;cursor: pointer;box-shadow: 0 4px 15px rgba(0,0,0,0.2);transition: all 0.3s ease;margin-top: 20px;font-weight: bold;letter-spacing: 1px;}#u-btn-create:hover {background: #ff7b00;transform: translateY(-3px);box-shadow: 0 6px 20px rgba(0,0,0,0.25);}.m-note {position: absolute;width: 300px;background: #fff9c4;border-radius: 8px;box-shadow: 0 10px 30px rgba(0,0,0,0.15);overflow: hidden;transition: box-shadow 0.3s ease;display: flex;flex-direction: column;min-height: 320px;}.m-note:hover {box-shadow: 0 15px 40px rgba(0,0,0,0.2);}.u-title {background: #ffd54f;color: #333;padding: 12px 20px;font-weight: bold;font-size: 1.1rem;cursor: move;display: flex;justify-content: space-between;align-items: center;}.u-close {cursor: pointer;font-style: normal;font-size: 1.5rem;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: all 0.2s ease;}.u-close:hover {background: rgba(0,0,0,0.1);transform: scale(1.1);}.u-edit {flex: 1;padding: 20px;font-size: 1rem;line-height: 1.5;outline: none;min-height: 200px;max-height: 300px;overflow-y: auto;background: #fffde7;}.u-timeUpdate {background: rgba(0,0,0,0.05);padding: 10px 20px;font-size: 0.85rem;color: #666;}.time {font-weight: 600;color: #333;}.features {display: flex;justify-content: center;flex-wrap: wrap;gap: 20px;max-width: 1000px;margin: 40px auto;}.feature-card {background: rgba(255, 255, 255, 0.15);backdrop-filter: blur(10px);border-radius: 15px;padding: 25px;width: 280px;color: white;box-shadow: 0 8px 20px rgba(0,0,0,0.1);}.feature-card h3 {font-size: 1.4rem;margin-bottom: 15px;display: flex;align-items: center;}.feature-card h3 i {margin-right: 10px;font-size: 1.6rem;}.feature-card p {line-height: 1.6;opacity: 0.9;}@media (max-width: 768px) {.header h1 {font-size: 2.2rem;}.features {flex-direction: column;align-items: center;}}</style>
</head>
<body><div class="header"><h1>📝 智能便签应用</h1><p>随时随地记录您的想法、待办事项和重要信息</p><button id="u-btn-create">+ 新建便签</button></div><div class="features"><div class="feature-card"><h3><i>📌</i> 拖拽移动</h3><p>点击标题栏可以拖拽便签到任意位置，方便您整理工作区</p></div><div class="feature-card"><h3><i>🔄</i> 自动保存</h3><p>内容编辑后会自动保存到本地存储，刷新页面也不会丢失</p></div><div class="feature-card"><h3><i>⏱️</i> 时间记录</h3><p>每次更新便签内容都会记录时间，帮助您追踪进度</p></div></div><script>var note = {util: {}, //存放基础工具的方法operate: {} //存放便签相关的操作};note.util = {$: function (value, node) {return (node || document).querySelector(value);},dateFormat: function (ms) {/*格式化时间*/var d = new Date(ms);var pad = function (s) {if (s.toString().length === 1) {s = '0' + s;}return s;}var year = d.getFullYear();var month = d.getMonth() + 1;var date = d.getDate();var hour = d.getHours();var minute = d.getMinutes();var second = d.getSeconds();return year + '-' + pad(month) + '-' + pad(date) + ' ' + pad(hour) + ':' + pad(minute) + ':' + pad(second);}};note.operate = {/*本地存储的关键字*/keyItem: 'stickyNote',/*根据便签的id来获取note*/get: function (id) {var notes = this.getNotes();return notes[id] || {};},/*设置一个note的id及其内容*/set: function (id, content) {var notes = this.getNotes();if (notes[id]) {Object.assign(notes[id], content);} else {notes[id] = content;}localStorage.setItem(this.keyItem, JSON.stringify(notes));console.log('saved note: id: ' + id + ' content: ' + JSON.stringify(notes[id]));},/*根据id删除对应的便签*/remove: function (id) {var notes = this.getNotes();delete notes[id];localStorage.setItem(this.keyItem, JSON.stringify(notes));},/*获取localStorage中所有的note*/getNotes: function () {return JSON.parse(localStorage.getItem(this.keyItem) || '{}');}};/*创建note*/(function (util, operate) {var $ = util.$;var movedNote = null;var startX;var startY;var maxZindex = 0;var noteTemplate = `<div class="u-title">便签 <i class="u-close">×</i></div><div class="u-edit" contenteditable="true"></div><div class="u-timeUpdate"><span>更新时间：</span><span class="time"></span></div>`;function Note(options) {var note = document.createElement('div');note.className = 'm-note';note.id = options.id || 'm-note-' + Date.now();note.innerHTML = noteTemplate;$('.u-edit', note).innerHTML = options.content || '';note.style.left = (options.left || Math.round(Math.random() * (window.innerWidth - 320))) + 'px';note.style.top = (options.top || Math.round(Math.random() * (window.innerHeight - 320))) + 'px';note.style.zIndex = options.zIndex || maxZindex++;document.body.appendChild(note);this.note = note;this.updateTime(options.updateTime);this.addEvent();}/*时间更新方法*/Note.prototype.updateTime = function (ms) {var ts = $('.time', this.note);ms = ms || Date.now();ts.innerHTML = util.dateFormat(ms);this.updateTimeInMs = ms;}/*便签保存*/Note.prototype.save = function () {operate.set(this.note.id, {left: this.note.offsetLeft,top: this.note.offsetTop,zIndex: parseInt(this.note.style.zIndex),content: $('.u-edit', this.note).innerHTML,updateTime: this.updateTimeInMs});console.log('note saved');}/*删除此便签*/Note.prototype.close = function (e) {console.log('close note');document.body.removeChild(this.note);}Note.prototype.addEvent = function () {var that = this;var note = this.note;var titleBar = $('.u-title', note);var edit = $('.u-edit', note);var closeBtn = $('.u-close', note);// 标题栏拖拽事件titleBar.addEventListener('mousedown', function(e) {if (e.target === closeBtn) return; // 排除关闭按钮movedNote = note;var rect = note.getBoundingClientRect();startX = e.clientX - rect.left;startY = e.clientY - rect.top;// 提升当前便签的z-indexmaxZindex++;note.style.zIndex = maxZindex;operate.set(note.id, {zIndex: maxZindex});});// 编辑区域事件var inputTimer;edit.addEventListener('input', function() {var content = edit.innerHTML;clearTimeout(inputTimer);inputTimer = setTimeout(function() {var time = Date.now();operate.set(that.note.id, {content: content,updateTime: time});that.updateTime(time);}, 500);});// 关闭按钮事件closeBtn.addEventListener('click', function(e) {operate.remove(that.note.id);that.close();});}/*按钮的监听事件*/document.addEventListener('DOMContentLoaded', function (e) {$('#u-btn-create').addEventListener('click', function (e) {new Note({});});/*全局鼠标移动事件*/function mousemoveHandler(e) {if (!movedNote) return;movedNote.style.left = (e.clientX - startX) + 'px';movedNote.style.top = (e.clientY - startY) + 'px';}function mouseupHandler(e) {if (!movedNote) return;operate.set(movedNote.id, {left: movedNote.offsetLeft,top: movedNote.offsetTop});movedNote = null;}document.addEventListener('mousemove', mousemoveHandler);document.addEventListener('mouseup', mouseupHandler);/*初始化*/var notes = operate.getNotes();Object.keys(notes).forEach(function (id) {var options = notes[id];if (options.zIndex > maxZindex) {maxZindex = options.zIndex;}new Note(Object.assign(options, {id: id}));});// 确保maxZindex至少为1maxZindex = Math.max(maxZindex, 1);});})(note.util, note.operate);</script>
</body>
</html>