Brython：浏览器中的Python-第六篇
浏览器WebAPI
浏览器公开了可以从JavaScript访问的WebAPI，而Brython可以访问相同的API。在本节中，您将扩展Base64计算器以在两次浏览器页面重载之间存储数据。
允许此功能的WebAPI是WebStorageAPI。它包括两种机制：
sessionStoragelocalStorage您将localStorage在接下来的示例中使用。
如前所述，Base64计算器会创建一个字典，其中包含映射到该字符串的Base64编码值的输入字符串。加载页面后，数据将保留在内存中，但是当您重新加载页面时，数据将被清除。将数据保存到localStorage将保留两次页面重新加载之间的字典。
该localStorage是一个key-value存储。要访问localStorage，您需要导入storage。为了贴近初步实现，你会加载和字典数据保存到localStorage的JSON格式。保存和获取数据的密钥将为b64data。修改后的代码包括新的导入和一个load_data()函数：
load_data()在加载Python代码时执行。它从页面中获取JSON数据localStorage并填充一个Python字典，该字典将在页面有效期内将数据保存在内存中。如果没有找到b64data的localStorage，然后它创建一个空的字典键b64data中localStorage，并返回一个空的字典。您可以load_data()通过展开下面的框来查看完整的Python代码合并。
它显示了如何将localStorageWebAPI用作持久性存储，而不是像本示例的先前实现那样依赖于临时的内存中存储。
您可以从browser和其他子模块访问所有WebAPI函数。Brython文档中提供了有关访问WebAPI的高级文档。有关更多详细信息，您可以查阅WebAPI文档并使用Brython控制台尝试WebAPI。
在某些情况下，您可能必须在熟悉的Python函数和WebAPI的函数之间进行选择。例如，在上面的代码中，您使用了PythonBase64编码base64.b64encode()，但您可能已经在使用JavaScript的btoa()：
您可以在在线控制台中测试这两种版本。使用window.btoa()仅在Brython上下文中有效，而base64.b64encode()可以与常规Python实现（例如CPython）一起执行。
请注意，在CPython版本中，base64.b64encode()采用abytearray作为参数类型，而JavaScriptwindow.btoa()采用字符串。如果需要考虑性能，请考虑使用JavaScript版本。
WebUI框架
流行的JavaScriptUI框架（例如Angular，React，Vue.js或Svelte）已成为前端开发人员工具包的重要组成部分，并且Brython与其中一些框架无缝集成。在本节中，您将使用Vue.js版本3和Brython构建应用程序。
您将构建的应用程序是一种用于计算字符串哈希的表单。这是正在运行的HTML页面的屏幕截图：
在bodyHTML页面中定义的绑定和模板声明：
如果您不熟悉Vue，那么下面将快速介绍一些内容，但是随时可以查阅官方文档以获取更多信息：
Vue.js指令是前缀为的特殊属性值，v-它们在DOM和Vue.js组件的值之间提供动态行为和数据映射：v-model.trim=input_text将输入值绑定到Vue模型input_text并修剪该值。v-model=algo将下拉列表的值绑定到algo。v-for=nameinalgos将选项值绑定到name。Vue模板用双花括号包围的变量表示。Vue.js将相应的占位符替换为Vue组件中的相应值：hash_valuename事件处理程序使用at符号（
）进行标识，例如inclick=