Brython 浏览器存储实战:browser.local_storage 与 browser.session_storage 完全指南

发布时间:2026/10/8 2:02:27

Brython 浏览器存储实战:browser.local_storage 与 browser.session_storage 完全指南 编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载导读本文聚焦 Brython浏览器中的 Python 3 实现提供的两个标准库模块browser.local_storage与browser.session_storage系统讲解 HTML5 Web Storage 的核心机制、Brython 的字典式封装接口、底层源码实现与典型应用场景。读完本文你将掌握如何在 Brython 应用中持久化或按会话保存数据、正确处理键值只能是字符串这一关键约束并能基于仓库源码理解每个 API 背后的真实行为与异常规则。一、HTML5 存储是什么先理解四个关键事实Brython 的browser.local_storage模块建立在 HTML5 定义的 Web Storage 规范之上原始文档引用了 W3C 规范 中关于localStorage属性的定义。要正确使用它必须先理解以下四个基础事实它是浏览器端的客户端键值数据库。数据保存在用户自己的机器上、自己的浏览器里这也意味着这些数据只有在用户使用同一台机器、同一个浏览器时才能访问。注意local_storage是与浏览器绑定的而不是与计算机绑定。键key和值value都必须是字符串。这是最重要的一条约束例如你存入一个列表取回时将不是列表而是它的字符串表示如[a, b]。这一点在原始文档中被特别强调后文会详细展开。数据按协议 域名 端口隔离。local_storage数据库归属于一个 HTML5 origin即三元组scheme://host:port。同一域名的所有页面共享同一个数据库甚至可以由多个浏览器标签页并发访问但是通过http://打开的页面无法看到https://会话期间创建的数据库。HTML5 定义了两种存储本地存储local storage与会话存储session storage。前者是持久化的用户关闭浏览器窗口后数据仍然保留后者在浏览器窗口关闭时即丢失数据。二、Brython 中的两个模块local_storage 与 session_storageHTML5 存储能力在 Brython 中被实现为browser包下的两个模块对应源码位于 www/src/Lib/browser/local_storage.py 与 www/src/Lib/browser/session_storage.py模块暴露对象底层 JS 对象生命周期browser.local_storagestoragewindow.localStorage持久化关闭浏览器后数据仍保留browser.session_storagestoragewindow.sessionStorage会话级关闭浏览器窗口即丢失两个模块都导出一个名为storage的单一对象接口完全一致可以像操作字典一样与之交互但要牢记键值限于字符串。何时该用session_storage当你不想让数据在浏览器会话或标签页之间共享时使用它——典型场景是登录令牌log-in token。原始文档明确指出会话存储适合存放这类不该跨会话保留的敏感凭证。从源码看session_storage的实现非常精简SessionStorage类直接继承LocalStorage类只重写了初始化逻辑将底层的window.localStorage替换为window.sessionStorage并各自声明了storage_type属性local_storage/session_storage用于标识类型# www/src/Lib/browser/session_storage.py class SessionStorage(LocalStorage): storage_type session_storage def __init__(self): if not has_session_storage: raise EnvironmentError(SessionStorage not available) self.store window.sessionStorage三、快速上手读写与删除原始文档给出的第一个示例即展示了最基本的三行用法from browser.local_storage import storage storage[foo] bar print(storage[foo]) # 输出: bar执行后即使你关闭标签页、关闭浏览器甚至关机只要再次使用同一个浏览器访问同一个scheme://host:portfoo键下的值依然可读。永久删除一个键值对使用deldel storage[foo] print(storage[foo]) # 抛出 KeyError删除不存在的键会触发KeyError这与 Python 字典的行为一致。在源码 www/src/Lib/browser/local_storage.py 中可以看到__delitem__先检查键必须是字符串再检查键是否存在于存储中随后调用底层的removeItemdef __delitem__(self, key): if not isinstance(key, str): raise TypeError(key must be string) if key not in self: raise KeyError(key) self.store.removeItem(key)四、字典式接口全景支持的方法与底层行为storage对象完整模仿了 Python 字典的接口原始文档列出其支持的方法getpopkeysvaluesitemsclear__len____contains____iter__一个重要的行为差异keys、values、items返回的是列表拷贝list copy而不是字典视图或迭代器。源码中的注释解释了这一设计决策——返回生成器对使用者帮助有限而自定义迭代器属于过度设计且可能拖慢性能def keys(self): return [self.store.key(i) for i in range(self.store.length)] def values(self): return [self.__getitem__(k) for k in self.keys()] def items(self): return list(zip(self.keys(), self.values()))各方法底层实现要点对照源码方法/操作底层 JS 调用行为说明storage[key] valuesetItem(key, value)键或值非字符串时抛TypeError: key/value must be stringstorage[key]getItem(key)命中返回字符串未命中返回javascript.NULL并抛KeyError(key)del storage[key]removeItem(key)键非字符串抛TypeError键不存在抛KeyErrorkey in storagegetItem(key)通过返回值是否为javascript.NULL判断存在性len(storage)store.length返回存储中的键值对数量get(key, defaultNone)getItem(key) or default键不存在时返回默认值pop(key)/pop(key, default)getItemremoveItem无默认值且键不存在时抛KeyError有默认值则返回默认值clear()store.clear()清空当前 origin 下的全部键值对迭代__iter__基于keys()列表for key in storage可遍历全部键类型检查是硬约束LocalStorage类对键和值做了严格的类型校验。读写路径上非字符串的键或值会直接抛出TypeErrordef __setitem__(self, key, value): if not isinstance(key, str): raise TypeError(key must be string) if not isinstance(value, str): raise TypeError(value must be string) self.store.setItem(key, value)这意味着storage[1] x整型键或storage[k] 123整型值都会失败。如果需要存储列表、字典等结构化数据请参考第六节的ObjectStorage。环境可用性检查两个模块在导入时都会探测浏览器是否支持对应的存储 API。local_storage通过hasattr(window, localStorage)检测session_storage通过hasattr(window, sessionStorage)检测。若底层 API 不存在实例化时会抛出EnvironmentError# www/src/Lib/browser/local_storage.py has_local_storage hasattr(window, localStorage) def __init__(self): if not has_local_storage: raise EnvironmentError(LocalStorage not available) self.store window.localStorage只有探测成功时模块才会在导入阶段创建storage单例if has_local_storage: storage LocalStorage()五、用测试用例验证接口行为仓库自带的测试 www/tests/test_storage.py 完整验证了上述接口的行为可作为学习与回归测试的参考。它依次断言了storage.storage_type local_storagesess_storage.storage_type session_storage写入与get读取pop返回被删除的值且删除后keys()长度随之变化pop在键不存在且无默认值时抛KeyError提供默认值时返回默认值del删除键值对for key in storage迭代items()返回键值对列表。# 摘自 www/tests/test_storage.py节选 session_storage[hi] blah assert(session_storage.get(hi) blah) assert(session_storage.pop(foo) arg) assert(sorted(session_storage.keys()) [hi]) assert(len(session_storage) 1) del session_storage[hi] assert(len(session_storage.keys()) 0)此外www/tests/index.html 中也有真实页面使用storage[py_src]保存编辑器源码、用str(doc[files].selectedIndex)保存下拉选择状态的例子展示了值必须是字符串在实际项目中的处理手法显式调用str()转换。六、进阶ObjectStorage 让任意对象可存储由于local_storage原生只接受字符串键值Brython 在 www/src/Lib/browser/object_storage.py 中提供了ObjectStorage包装类它利用json.dumps/json.loads在读写前后自动完成序列化与反序列化从而让字典、列表等任意 JSON 可序列化对象都能直接存入storagefrom browser.object_storage import ObjectStorage from browser.local_storage import storage object_storage ObjectStorage(local_storage) object_storage[mah] {hi: 5} assert(object_storage[mah] {hi: 5})从源码结构看ObjectStorage内部将所有键和值统一先json.dumps再写入底层storage读取时再json.loads还原因此它同样具备get、pop、keys、values、items、clear、__len__、__contains__、__iter__的完整字典式接口keys()返回的是反序列化后的键列表。这也是处理字符串限制最直接、最优雅的官方方案。七、完整示例基于 local_storage 的 TO-DO 待办应用原始文档末尾引用了一个完整的实战示例——一个使用local_storage的待办事项TO-DO list应用其完整实现位于 www/doc/en/examples/local_storage/local-storage-example.html。该示例展示了几个非常实用的模式1. 首次访问时初始化存储——用异常捕获判断键是否存在try: storage[tasklist] except: storage[tasklist] json.dumps({})2. 用 JSON 序列化保存结构化数据——待办列表整体作为一个 JSON 字符串存进storage[tasklist]每次增删后调用_save()回写self.tasks json.loads(storage[tasklist]) def _save(self): # 示例中的保存逻辑示意 storage[tasklist] json.dumps(self.tasks)3. 键的生成——用datetime.datetime.now().strftime(%Y/%m/%d-%H:%M:%S)生成时间戳作为每条待办的唯一键天然规避了键必须是字符串的限制。4. 删除同步——删除任务时同时del self.tasks[key]与del doc[key]移除 DOM 行再回写存储保证内存、页面与存储三处一致。从源码结构看这个示例还结合了browser.htmlhtml.TR、html.TD、html.IMG动态建表与事件绑定link.bind(click, self._del_task)是Brython HTML5 存储 DOM 操作的完整闭环样例适合作为学习模板。八、使用要点总结字符串约束键和值只能是字符串local_storage/session_storage会在类型不符时抛TypeError结构化数据请用json手动序列化或直接使用browser.object_storage的ObjectStorage。作用域隔离数据归属于scheme://host:port这一 HTML5 origin同域名页面共享、跨协议http/https隔离。两种生命周期local_storage持久化保留session_storage随浏览器窗口关闭而清空适合登录令牌等场景。字典式接口get、pop、keys、values、items、clear、in、len、del、迭代均可用但keys/values/items返回列表而非视图。异常行为读取或删除不存在的键抛KeyErrorpop无默认值时同样抛KeyError浏览器不支持存储 API 时抛EnvironmentError。官方测试可参考 www/tests/test_storage.py 验证全部接口行为该文件同时覆盖了ObjectStorage的序列化存取。赞分享编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载相关推荐Brython 浏览器本地存储指南browser.local_storage 与 browser.session_storage 完全解析Brython 浏览器本地存储指南browser.local_storage 与 browser.session_storage 完全解析 导读 本文围绕 B编程语言语言运行时编译器前端Kornia 图像工具函数完全指南make_grid 与形状保持装饰器Kornia 图像工具函数完全指南make_grid 与形状保持装饰器 kornia.image 是 Kornia 中面向图像数据的高层 API 模块而 i编程语言语言运行时编译器前端Brython 浏览器本地存储实战使用 browser.local_storage 在浏览器端持久化数据Brython 浏览器本地存储实战使用 browser.local_storage 在浏览器端持久化数据 本篇技术指南以 Brython 官方 Cookboo编程语言语言运行时编译器前端上一篇Megatron-LM Megatron RL 实战指南面向大规模 LLM 的强化学习后训练框架下一篇Flipper Zero 二维码显示应用 flipperzero-qrcode 实战指南从 .qrcode 文件制作、模式选择到源码级原理解析创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
延伸阅读

更多相关文章

2026/10/8 3:12:34

游戏服务端核心职责全解析:权威、同步与架构设计

做游戏研发这些年,我经常被问到一个问题:游戏服务端到底在忙什么?很多人觉得服务端就是个“转发行数据的中转站”,客户端才是真正玩游戏的地方。这个理解不能说全错,但离真相很远。单机游戏跑得好好的,一旦…

2026/10/8 3:12:34

从情绪到旋律:用Python构建AI音乐情绪生成器全解析

你有没有过这种时候——深夜加班,耳机里的歌循环到麻木,脑子里冒出一段旋律却怎么也抓不住。更恼火的是,你想把它写成谱子,才发现自己连五线谱都认不全。那段时间我一直在琢磨:能不能搞一个工具,输入一句“…

2026/10/8 3:12:34

中国高分辨率土壤信息网格:机器学习驱动的数字土壤制图

你是不是也有过这种经历:想用中国的土壤数据做研究,打开传统的土壤图,发现一个多边形里只写了“棕壤”“水稻土”这样的类型名,属性值给一个模糊范围,想精确算有机碳储量、给水文模型配参数,根本无从下手。…

2026/10/8 3:12:34

Agent-Reach:基于CLI的AI Agent统一调度框架实战指南

1. 项目缘起与核心定位Agent-Reach 这个名字第一次出现在我视野里的时候,我正被一堆零散的 AI Agent 脚本折磨得够呛。手头有五六个不同场景的小工具,有的负责抓取信息,有的负责自动回复,有的负责定时整理数据,每个都是…

2026/10/8 3:12:34

数据库设计实战:从表结构规划到索引优化与SQL调优

1. 内容整体设计与思路拆解1.1 数据库设计到底在解决什么问题聊数据库设计之前,先想一个场景:你接手了一个已经跑了三年的业务系统,表有七八十张,字段上千个,看似功能齐全,但只要涉及关联查询,S…

2026/10/8 3:07:34

FPGA时序分析实战:Vivado约束编写与关键路径优化

做FPGA的人,十个里有九个被时序折腾过。写完RTL,功能仿真全绿,一上板子就冒烟,查来查去多半是时序收敛的问题。Vivado的时序分析不难,难的是不知道怎么系统性地看报告、定位路径、做优化。这篇文章我就拿一个实际的三电…

2026/10/5 6:32:56

Jev+Agent接管浏览器:browser-use实战与jev-ultrafast性能优化

1. 从“Jev”说起:为什么我要把Agent接进浏览器“Jev”这个词最近在圈子里出现的频率越来越高,很多人第一次听到会以为是某个新模型的名字,其实它更像是一种思路——把Jev模型的能力当作底座,通过Agent的方式去接管浏览器&#xf…

2026/10/7 8:18:33

多智能体集群实战:DeepAgents编排、MCP与A2A协议及Skills体系

1. 从"单兵作战"到"集群协同":多智能体编排到底在解决什么问题如果你最近在折腾 Agent 相关的东西,大概率会有一种感觉:单个 Agent 能做的事情,其实很快就摸到天花板了。你给它一个提示词,挂几个工…

2026/10/6 17:46:51

无源低通滤波器设计实战:从RC到LC,手把手教你避开那些坑

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/8 0:02:17

自然数立方等于连续奇数之和:从证明到编程验证

十几年来我一直游走在数学科普和编程教学这两块内容之间,对“看起来像魔法、拆开全是数学”的结论总是格外敏感。最近翻资料时又撞见一句话:任何一个自然数 m 的立方,都可以写成 m 个连续奇数之和。2 的立方等于 3 加 5,3 的立方等…

2026/10/8 0:02:17

C#上位机SSH连接实战:用SSH.NET补齐超时、批量与密钥认证

简介:这是一份基于 C# 开发的 SSH 连接功能半成品工程,原本作为另一个主项目的子功能模块,现独立打包分享。工程采用 WinForms 界面,包含源码、解决方案、安装部署工程、NuGet 依赖包及说明文档,适合正在做远程连接、网…

2026/10/8 0:02:17

Java SpringBoot一体化智能售后系统设计与实现全解析

毕业设计年年做,Java Web 方向的题目翻来覆去就那么几个,但“一体化智能售后系统”这个题,每次看到我都觉得值得认真聊一聊。它不是一个简单 curd 堆出来的管理系统,而是把客户、工单、派单、处理、回访、统计整条链路串起来的一套…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑