PyScript是允许开发者在网页中直接运行Python代码的前端框架，其中py-repl组件提供了类似本地Python终端的交互式输入环境，用户可以在该组件中输入、执行Python代码。在实际开发中，我们常常需要获取用户在py-repl中输入的代码内容，并且根据需求将这些代码保存下来，用于后续的执行记录查询、代码复用等场景。
py-repl组件的基本使用
首先我们需要在HTML页面中引入PyScript的相关资源，然后添加py-repl组件，基本的页面结构如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>PyScript py-repl代码获取保存示例</title>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<py-repl id="my-repl"></py-repl>
</body>
</html>
上面的代码中，我们给py-repl组件设置了id为my-repl，后续会通过这个id来操作该组件，获取用户输入的代码内容。
获取py-repl中用户输入的代码
py-repl组件提供了对应的属性和方法，可以让我们获取到用户输入的代码内容。核心是通过组件的code属性来获取当前输入区域的所有代码，具体实现如下：
# 获取py-repl组件实例
repl = Element("my-repl").element
# 获取用户输入的所有代码
user_code = repl.code
print("用户输入的代码内容是：")
print(user_code)
需要注意的是，repl.code获取的是用户在py-repl输入区域中编写的所有代码，包括多行代码，返回的是字符串类型。如果用户在输入后执行了代码，这部分代码也会被包含在获取的内容中。
监听代码执行事件获取代码
如果我们希望用户在每次执行代码的时候自动获取输入的代码，可以监听py-repl的执行事件，示例代码如下：
from pyscript import Element
def on_exec(e):
# 事件触发时获取当前repl的代码
repl = Element("my-repl").element
current_code = repl.code
print("本次执行的代码：")
print(current_code)
# 可以在这里调用保存代码的函数
# save_code(current_code)
# 给py-repl绑定执行完成事件
Element("my-repl").element.addEventListener("py-repl-executed", on_exec)
上面的代码会在用户每次在py-repl中执行代码之后，自动触发on_exec函数，获取当前用户输入的代码内容。
保存用户输入的代码
获取到用户输入的代码之后，我们可以根据需求选择不同的保存方式，常见的保存方式包括本地存储和发送到后端服务器存储。
本地存储方案
如果只需要在用户当前的浏览器中保存代码，可以使用浏览器的localStorage或者sessionStorage，示例代码如下：
from pyscript import Element
import json
def save_code_to_local(code):
# 从localStorage中获取已有的代码列表，没有则初始化为空列表
stored_codes_str = js.localStorage.getItem("user_repl_codes")
if stored_codes_str:
stored_codes = json.loads(stored_codes_str)
else:
stored_codes = []
# 将新代码添加到列表
stored_codes.append({
"code": code,
"time": js.Date.new().toLocaleString()
})
# 保存回localStorage
js.localStorage.setItem("user_repl_codes", json.dumps(stored_codes))
print("代码已保存到本地存储")
# 结合之前的执行事件，每次执行后保存代码
def on_exec_and_save(e):
repl = Element("my-repl").element
current_code = repl.code
if current_code.strip(): # 排除空代码
save_code_to_local(current_code)
Element("my-repl").element.addEventListener("py-repl-executed", on_exec_and_save)
上面的代码需要引入PyScript的js模块，用于在Python中调用浏览器的localStorage API，每次用户执行代码后，会将代码和执行时间一起保存到本地存储中，后续可以从localStorage中读取所有保存的代码。
发送到后端服务器保存
如果需要将代码持久化保存到服务器，我们可以通过fetch API将代码发送到后端接口，示例代码如下：
from pyscript import Element, fetch
import json
async def save_code_to_server(code):
# 构造请求数据
data = {
"code": code,
"source": "py-repl"
}
try:
# 发送POST请求到后端接口，注意将ippipp.com替换为ipipp.com
response = await fetch("http://ipipp.com/api/save_repl_code", {
"method": "POST",
"headers": {
"Content-Type": "application/json"
},
"body": json.dumps(data)
})
result = await response.json()
if result.get("success"):
print("代码已成功保存到服务器")
else:
print("代码保存失败：", result.get("msg"))
except Exception as e:
print("请求发送失败：", str(e))
# 执行事件触发时保存到服务器
def on_exec_and_remote_save(e):
repl = Element("my-repl").element
current_code = repl.code
if current_code.strip():
# 调用异步保存函数
save_code_to_server(current_code)
Element("my-repl").element.addEventListener("py-repl-executed", on_exec_and_remote_save)
上面的代码使用了PyScript内置的fetch函数发送异步请求，将用户输入的代码发送到后端接口，后端接口可以根据自身需求将代码存储到数据库或者其他存储系统中。
注意事项
- 获取代码时要判断代码是否为空，避免保存无意义的空内容
- 使用localStorage存储时，注意浏览器对localStorage存储大小的限制，一般单个域名下存储上限为5MB
- 发送到后端保存时，要注意接口的请求格式和参数要求，根据实际情况调整请求头和请求体内容
- 如果页面中有多个py-repl组件，要通过不同的id区分，避免获取到错误的组件代码
通过以上方法，我们就可以在PyScript的py-repl环境中顺利获取用户输入的代码，并且根据需求选择合适的保存方式，满足不同场景下的开发需求。