🚀 用代码搭建「心情小窝」：一个极简情绪记录工具的实现 📝

🌟 项目初衷

每次想记录当下的心情，总觉得社交平台太喧嚣，记事本又太冰冷------于是动手做了个「心情小窝」，用最朴素的代码，装下那些细碎的情绪碎片。今天就来拆解它的架构和代码逻辑～

🛠️ 核心架构设计

整体采用「前端轻量化 + 本地存储」方案，适合个人私密场景：

技术栈：原生 HTML + CSS + JavaScript 🌱（拒绝冗余框架，够用就好）
数据存储：浏览器 LocalStorage 🗄️（隐私优先，无需服务器）
交互逻辑：单页无跳转设计 🔄（流畅记录不打断思路）

💻 核心代码展示

1. 页面结构（HTML）

html 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>我的心情小窝</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>🌈 心情小窝</h1>
    <p>把今天的情绪偷偷藏在这里吧～</p>

    <!-- 输入区 -->
    <div class="input-area">
      <textarea placeholder="今天发生了什么？心情如何？" id="mood-content"></textarea>
      <div class="mood-select">
        <span>心情标签：</span>
        <button class="mood-btn" data-mood="happy">😊 开心</button>
        <button class="mood-btn" data-mood="sad">😢 难过</button>
        <button class="mood-btn" data-mood="calm">😌 平静</button>
      </div>
      <button id="save-btn">💾 保存心情</button>
    </div>

    <!-- 记录展示区 -->
    <div class="records-area">
      <h2>📖 心情记录</h2>
      <div id="records-list">
        <!-- 记录会通过JS动态插入 -->
        <p class="empty-tip">还没有记录，写下第一条心情吧～</p>
      </div>
    </div>
  </div>

  <script src="app.js"></script>
</body>
</html>

2. 数据存储逻辑（JavaScript）

javascript 复制代码

// 存储结构设计：每条心情包含内容、标签、时间戳
class MoodStorage {
  // 保存新心情
  saveMood(content, mood) {
    const moodData = {
      id: Date.now(), // 用时间戳当唯一ID
      content,
      mood,
      time: new Date().toLocaleString() // 格式化时间
    };
    // 从LocalStorage读取已有数据
    const existing = JSON.parse(localStorage.getItem('moods') || '[]');
    existing.push(moodData);
    // 存回LocalStorage
    localStorage.setItem('moods', JSON.stringify(existing));
    return moodData;
  }

  // 获取所有心情记录
  getAllMoods() {
    return JSON.parse(localStorage.getItem('moods') || '[]');
  }
}

// 实例化存储对象
const moodStore = new MoodStorage();

3. 交互核心逻辑（JavaScript）

javascript 复制代码

// 保存按钮点击事件
document.getElementById('save-btn').addEventListener('click', () => {
  const content = document.getElementById('mood-content').value;
  const selectedMood = document.querySelector('.mood-btn.active')?.dataset.mood;
  
  if (!content || !selectedMood) {
    alert('请写下心情并选择标签哦～');
    return;
  }
  
  // 保存数据
  const newMood = moodStore.saveMood(content, selectedMood);
  // 刷新页面展示
  renderMoodRecords();
  // 清空输入框
  document.getElementById('mood-content').value = '';
});

// 渲染心情记录
function renderMoodRecords() {
  const recordsList = document.getElementById('records-list');
  const allMoods = moodStore.getAllMoods();
  
  if (allMoods.length === 0) {
    recordsList.innerHTML = '<p class="empty-tip">还没有记录，写下第一条心情吧～</p>';
    return;
  }
  
  // 倒序展示（最新的在前面）
  recordsList.innerHTML = allMoods.reverse().map(mood => `
    <div class="mood-card" data-id="${mood.id}">
      <div class="mood-tag ${mood.mood}">
        ${mood.mood === 'happy' ? '😊' : mood.mood === 'sad' ? '😢' : '😌'}
      </div>
      <div class="mood-content">${mood.content}</div>
      <div class="mood-time">${mood.time}</div>
      <button class="delete-btn">🗑️ 删除</button>
    </div>
  `).join('');
}

🧩 架构设计亮点

数据隐私优先 🔒

用 LocalStorage 替代云端数据库，所有心情记录只存在自己的设备里，适合记录私密情绪。
极简可扩展 🧱

核心功能拆分为「存储层（MoodStorage）」和「视图层（render函数）」，后续想加新功能（比如心情统计），直接在存储层加方法即可。
轻量化体验 ⚡

不依赖任何框架，加载速度快，哪怕离线也能使用------毕竟情绪记录往往就在一念之间，不能等～

🌈 最后想说

其实好的工具不一定需要复杂的技术，就像这个「心情小窝」，几行代码就能搭建一个属于自己的情绪角落。如果你也想拥有，不妨试试用相似的思路，改改样式或功能，让它更贴合你的习惯～

💡 比如可以加个「心情日历」视图，或者按标签筛选记录，代码就在那里，怎么玩都由你定～