基于 Brython 和 localStorage 实现本地持久化存储的记仇本应用。项目利用 Brython 在浏览器端运行 Python 代码，通过 HTML5 标准 API 进行数据读写。核心功能包括记录的增删查，数据以键值对形式保存在浏览器本地，关闭页面后依然存在。实现了页面初始化渲染、表单提交验证、时间戳生成及唯一 ID 管理。该技术栈适合轻量级前端工具开发，无需后端支持，但需注意存储容量限制及安全性。
在 Web 开发中，有时我们需要利用浏览器端的能力来存储少量数据，而无需依赖后端服务器。本项目演示了如何使用 Python 语言结合 Brython 技术，配合 HTML5 的 API，构建一个运行在浏览器中的'记仇本'应用。该应用支持数据的增删查操作，且数据在关闭浏览器后依然保留。
localStorage虽然使用的是 Brython，但 localStorage 实际上是 HTML5 的标准 API。在 Brython 环境中，可以通过 browser.local_storage 模块来访问它。
from browser.local_storage import storage
类似于字典操作，可以直接赋值：
storage['key_name'] = 'value'
value = storage['key_name']
若 key 不存在，返回 None。
需要引入 window 对象：
from browser import window
for key in window.localStorage:
print(key)
del storage['key_name']
当页面加载时，程序应自动从 localStorage 读取已保存的记录，并将其渲染为表格形式展示给用户。
import html
import json
import time
from browser import document, window
from browser.local_storage import storage
def render_grudges():
tb = html.TABLE()
# 清空现有内容
userWindows = document['userWindows']
userWindows.clear()
# 遍历 localStorage 中的 key
for key in window.localStorage:
# 跳过非数据 key（如有）
if not key.isdigit(): continue
tr = html.TR()
try:
datas = json.loads(storage[key])
# 创建删除按钮
delBtn = html.BUTTON("已原谅")
delBtn.dataset["id"] = datas["id"]
delBtn.className = "confirm-btn"
delBtn.bind("click", delete_grudge)
# 时间戳格式化
timestamp_str = time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(int(datas["id"])))
td = html.TD(delBtn + " " + timestamp_str)
tr <= td
# 添加人物和内容列
for val in [datas.get("whos", ""), datas.get("Text", "")]:
td = html.TD(val)
tr <= td
tb <= tr
except Exception:
continue
userWindows <= tb
监听表单提交事件，获取输入框内容，验证非空后存入存储。
def save_grudge(ev):
getWhoVal = document["whos"].value
getTextVal = document["textArea"].value
if not getWhoVal or not getTextVal:
window.alert("请填写完整信息")
return
# 移除旧绑定防止重复触发
document["saveBtn"].unbind("click")
# 使用时间戳作为唯一 ID
ids = int(time.time())
datas = {
"id": ids,
"whos": getWhoVal,
"Text": getTextVal
}
# 序列化为字符串存储
storage[str(ids)] = json.dumps(datas)
# 刷新列表
render_grudges()
根据按钮绑定的 ID 找到对应数据并删除。
def delete_grudge(ev):
btn = ev.target
target_id = btn.dataset["id"]
if window.confirm(f"确定要原谅 {target_id} 吗？"):
del storage[target_id]
render_grudges()
为了便于维护，建议将项目分为以下文件：
index.html: 包含 HTML 结构和 Brython 脚本引用。main.py: 包含主要的 Python 逻辑。style.css: 定义页面样式。index.html 示例片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.js"></script>
</head>
<body onload="brython()">
<h1>记仇本</h1>
<input type="text" id="whos" placeholder="记谁">
<textarea id="textArea" placeholder="记什么仇"></textarea>
<button id="saveBtn">记下来</button>
<div id="userWindows"></div>
<script src="main.py" type="text/python"></script>
</body>
</html>
为了让应用更友好，可以添加 CSS 样式美化表格和按钮。
.confirm-btn {
background-color: #ffcccc;
border: none;
padding: 5px 10px;
cursor: pointer;
}
.confirm-btn:hover {
background-color: #ff9999;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
本文展示了如何利用 Brython 将 Python 代码运行于浏览器端，并结合 localStorage 实现数据的本地持久化。这种方案适合轻量级工具的开发，无需配置后端环境即可快速验证想法。需要注意的是，localStorage 容量有限（通常 5MB），且仅在当前域名下有效，不适合存储敏感信息。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online