在浏览器中使用PyScript的REPL环境编写Python代码时,交互式测试的场景非常常见,但默认的REPL会话不会自动保存历史代码,关闭页面后所有编写的内容都会丢失。掌握有效的代码保存策略,能大幅提升开发效率。

利用浏览器本地存储保存代码
浏览器的localStorage是前端常用的本地存储方案,能够持久化保存字符串数据,我们可以在PyScript中直接调用前端存储接口,实现REPL代码的自动保存。
首先在REPL中定义一个保存函数,将当前输入的代码片段存储到localStorage中:
# 定义保存代码到localStorage的函数
def save_repl_code(code_str, key="pyscript_repl_code"):
# 调用前端的localStorage.setItem方法
from js import localStorage
localStorage.setItem(key, code_str)
print("代码已保存到本地存储")
# 定义读取本地存储代码的函数
def load_repl_code(key="pyscript_repl_code"):
from js import localStorage
saved_code = localStorage.getItem(key)
if saved_code:
print("读取到的保存代码:")
print(saved_code)
else:
print("没有找到保存的代码")
使用时只需要把要保存的代码字符串传入save_repl_code函数即可,下次打开页面调用load_repl_code就能恢复之前的代码。
导出代码为本地文件
如果需要将REPL中的代码保存到本地文件,我们可以通过PyScript调用前端的文件下载能力,生成.py文件并触发下载。
实现导出功能的代码如下:
# 定义导出代码为本地文件的函数
def export_code_to_file(code_str, filename="repl_code.py"):
from js import document
# 创建a标签用于触发下载
a_tag = document.createElement("a")
# 将代码转为Blob对象
from js import Blob
blob = Blob.new([code_str], {"type": "text/plain"})
# 生成下载链接
a_tag.href = URL.createObjectURL(blob)
a_tag.download = filename
# 模拟点击触发下载
a_tag.click()
print(f"代码已导出为{filename}文件")
调用这个函数时传入要保存的代码和自定义文件名,浏览器就会自动下载对应的Python文件到本地。
持久化会话到后端服务
如果需要在多个设备或者多次浏览器会话中同步保存的代码,可以将代码提交到后端服务存储。这里以简单的后端接口为例,前端PyScript发送POST请求保存代码。
首先后端提供一个接收代码的接口,假设接口地址为http://127.0.0.1:8000/save-code,PyScript中实现提交的代码如下:
# 定义提交代码到后端的函数
def save_code_to_server(code_str, server_url="http://127.0.0.1:8000/save-code"):
import json
from pyodide.http import pyfetch
# 构造请求数据
data = json.dumps({"code": code_str})
# 发送POST请求
response = await pyfetch(
server_url,
method="POST",
headers={"Content-Type": "application/json"},
body=data
)
if response.status == 200:
print("代码已成功保存到后端服务")
else:
print(f"保存失败,状态码:{response.status}")
注意这个函数使用了await语法,需要在异步环境中调用,适合在PyScript的异步REPL场景中使用。
不同保存策略的对比
我们可以根据实际需求选择不同的保存方案,以下是三种方案的对比:
| 保存方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| localStorage存储 | 实现简单,无需后端,读取速度快 | 仅当前浏览器有效,清除缓存会丢失数据 | 单设备临时保存代码片段 |
| 导出本地文件 | 数据可长期保存,可转移到其他设备 | 需要手动操作导出导入,没有自动同步能力 | 需要归档保存完整代码文件的场景 |
| 后端服务存储 | 多设备同步,数据持久化安全性高 | 需要搭建后端服务,实现成本较高 | 团队协作或者多端同步代码的场景 |
实践注意事项
- 使用
localStorage保存时,注意不要存储过大的代码内容,避免超出浏览器的存储限制。 - 导出文件时如果需要保存多段REPL代码,可以在代码字符串中添加分隔注释,方便后续区分不同片段。
- 调用后端接口时需要注意跨域问题,如果后端地址不是同源,需要后端配置对应的CORS策略。
以上三种策略覆盖了大部分PyScript REPL会话代码保存的需求,开发者可以根据自身的使用场景灵活选择或者组合使用。