基于 Brython 与 LocalStorage 实现本地记仇本应用
项目背景
在 Web 开发中，有时我们需要利用浏览器端的能力来存储少量数据，而无需依赖后端服务器。本项目演示了如何使用 Python 语言结合 Brython 技术，配合 HTML5 的 localStorage API，构建一个运行在浏览器中的'记仇本'应用。该应用支持数据的增删查操作，且数据在关闭浏览器后依然保留。
技术选型
- Brython: 允许在浏览器中直接运行 Python 代码，通过 JavaScript 桥接操作 DOM。
- LocalStorage: HTML5 提供的客户端存储方案，用于键值对数据的持久化保存。
- HTML/CSS: 构建基础页面结构与样式。
核心原理：Brython 中的 LocalStorage
虽然使用的是 Brython，但 localStorage 实际上是 HTML5 的标准 API。在 Brython 环境中，可以通过 browser.local_storage 模块来访问它。
1. 导入模块
from browser.local_storage import storage
2. 数据存储
类似于字典操作，可以直接赋值：
storage['key_name'] = 'value'
3. 数据读取
value = storage['key_name']
若 key 不存在，返回 None。
4. 遍历所有 Key
需要引入 window 对象：
from browser import window
for key in window.localStorage:
print(key)
5. 删除数据
del storage['key_name']
功能实现详解
1. 页面初始化与渲染
当页面加载时，程序应自动从 localStorage 读取已保存的记录，并将其渲染为表格形式展示给用户。
import html
import json
import time
from browser import document, window
browser.local_storage storage
():
tb = html.TABLE()
userWindows = document[]
userWindows.clear()
key window.localStorage:
key.isdigit():
tr = html.TR()
:
datas = json.loads(storage[key])
delBtn = html.BUTTON()
delBtn.dataset[] = datas[]
delBtn.className =
delBtn.bind(, delete_grudge)
timestamp_str = time.strftime(, time.localtime((datas[])))
td = html.TD(delBtn + + timestamp_str)
tr <= td
val [datas.get(, ), datas.get(, )]:
td = html.TD(val)
tr <= td
tb <= tr
Exception:
userWindows <= tb
