很多朋友在做个人语录站、金句收集站时，一开始都会用 LocalStorage 来存储数据。
但这有个致命缺点：换个浏览器、清个缓存，数据全没了。
为了让“本站收藏语录”真正成为一个永久存档系统，我做了一个极简改造：
✅ 不用 MySQL
✅ 不用复杂后端框架
✅ 数据 100% 掌控在自己手里
✅ 换设备、清缓存，收藏永不丢失
一、最终效果预览
- 打开网页，自动从服务器加载语录
- 点击“上传语录”，直接写入服务器文件
- 点击“收藏”，服务器记录收藏状态
- 刷新 / 换设备，数据永不丢失
二、文件结构设计
我们只用 两个文件，放在 WordPress 主题的 pages 目录下即可：
text
/wp-content/themes/wordpress-theme-puock-master/pages/
├── quete-api.php ← 主程序（PHP + HTML + JS）
└── quetes.json ← 数据库（纯文本）👉 没有数据库，却胜似数据库。
三、部署实操步骤
Step 1：准备文件
新建 quete-api.php，把下面的完整代码复制进去。
新建一个空文件 quetes.json（内容留空即可）。
Step 2：上传到服务器
通过 FTP 或主机面板上传这两个文件到：/wp-content/themes/wordpress-theme-puock-master/pages/
Step 3：设置写入权限（非常关键）
因为 PHP 需要向 quetes.json 写入数据，必须给它写权限。
在文件管理器中：
- 右键
quetes.json - 权限设置为
666 - 或执行命令：
chmod 666 quetes.json
⚠️ 如果忘了这一步，语录会“上传失败”且没有任何明显报错。
Step 4：初始化数据
在浏览器访问：https://你的域名/wp-content/themes/wordpress-theme-puock-master/pages/quete-api.php
第一次访问时，PHP 会自动检测：
如果 quetes.json 是空的，自动写入 8 条默认语录（王阳明、庄子、尼采等）。
四、完整代码（quete-api.php）
将以下代码完整复制到 quete-api.php 中：略
五、核心原理解析
1️⃣ 数据存在哪里？
所有数据都在 quetes.json 这个纯文本文件里：
json
{
"quotes": [
{
"id": "q_650a...",
"text": "你未看此花时，此花与汝心同归于寂",
"author": "王阳明",
"time": "2026-01-20 12:00"
}
],
"favorites": [
{ "id": "q_650a...", "text": "...", "author": "..." }
]
}quotes：所有语录列表favorites：用户收藏的语录（完整对象）
2️⃣ 前端如何通信？
以前用 localStorage.setItem(...)，现在改为向 PHP 发送请求：
3️⃣ PHP 在背后做了什么？
PHP 只做三件事：
| 动作 | 方法 |
|---|---|
| 读数据 | file_get_contents('quetes.json') |
| 写数据 | file_put_contents('quetes.json', $json) |
| 返回 JSON | echo json_encode(...) |
没有任何数据库，完全基于文件读写，简单、稳定、无需额外配置。
六、功能测试清单
部署完成后，请逐项测试：
✅ 页面能正常打开，背景视频播放
✅ 默认 8 条语录自动出现
✅ 点击“随机刷新”可以切换语录
✅ 点击“收藏”按钮，按钮变红，收藏数 +1
✅ 刷新页面，收藏状态依然存在
✅ 点击“我的收藏”，弹出窗口显示已收藏的语录
✅ 在收藏弹窗中点击某条语录，主界面切换到该语录
✅ 在收藏弹窗中删除某条，收藏数相应减少
✅ 在底部表单输入新语录并提交，顶部总语录数增加，新语录出现在列表中
✅ 换一台设备或清空浏览器缓存后重新访问，数据依然存在（因为数据存储在服务器）
