Comme mentionné dans le titre, le projet a été écrit et est basé sur le projet stocké localement basé sur local_storage
local_storage
存储在本地的项目
该项目运行时是基于brython
, 你可能想问,为什么不使用原生python
来编写网页呢,这个有个误区是,网页是由html
代码编写的,而原生python
想要操作DOM
非常难,所以brython
正是为这个来操作的。
初始打开页面,因为没有数据展示,所以只有一个增加按钮。
当我们点击【画个圈圈记下来】按钮后,会刷新为新增页面,例如:
此时,我们只需要输入信息,比如 记老婆的仇,缘由为 买switch游戏透露给丈母娘,还得被骂。
此时点击记仇,就可以存储到页面上了。
此时若点击已原谅,则可以删除该记录。
你可能细心发现了,哎,关掉了浏览器,下次打开,怎么还会有记录在上面呢,这是因为用了local_storage
,那么,什么是local_storage
呢?
哎,我们使用的是brython
中的local_storage
但是,它可不是python
定义的哦,而是HTML 5
提供的存储数据的API之一,可以在浏览器中保持键值对数据块。
现在来展示使用一下brython
存储和删除的操作。
导入库:
from browser.local_storage import storage
存储数据,例如键值信息juejinName
存储为pdudo
storage[juejinName] = "pdudo"
查询的话,直接使用storage[变量]
就好,若为空,则返回None
v = storage[juejinName]
循环所有的key
,需要引入window
库,再使用for...in
来完成
from browser import window for key in window.localStorage: print(key)
也可以直接使用for...in
来遍历storage
而删除数据呢?只需要像删除字典一下
del storage[juejinName]
storage
是不是操作起来和字典非常类似呢?减少了开发者的学习成本。
有了上述前置条件后,我们再看该项目,便可以总结为 针对localStorage
的增删查,首先当页面加载出来的时候,我们需要先遍历一下localstorage
数据,从而映射为一个table
,例如:
for key in window.localStorage: tr = html.TR() datas = json.loads(storage[key]) delBtn = html.BUTTON("已原谅") delBtn.dataset["id"] = datas["id"] delBtn.className = "confirm-btn" delBtn.bind("click",delGrudges) td = html.TD(delBtn+" "+time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(int(datas["id"])))) tr <= td for tdVal in datas["whos"],datas["Text"]: td = html.TD(tdVal) tr <= td tb <= tr userWindows <= tb
上述代码是遍历localStorage
,而后在定义删除按钮,等将其他值组合完毕后,全部加载进table
中,而后再页面上显示。
而添加数据呢?
def saveGrudges(ev): getWhoVal = document["whos"].value getTextVal = document["textArea"].value if getWhoVal == "" or getTextVal == "": return document["saveBtn"].unbind("click") ids = int(time.time()) datas = { "id": ids, "whos": getWhoVal, "Text": getTextVal } storage[str(ids)] = json.dumps(datas)
上述代码,显示获取input
和textarea
框中的值,再判断是否用户没有输入,我们将数据组装为一个字典,而后转换为字符串,再存入localstage
中。
还有其他操作,这个可以直接看代码说明,brython
#🎜 🎜#Ce projet Le runtime est basé sur brython
Vous voudrez peut-être vous demander pourquoi ne pas utiliser du python
natif pour écrire des pages Web. Il y a un malentendu sur le fait que les pages Web sont écrites. par html code> le code est écrit, et il est très difficile pour un <code>python
natif de faire fonctionner DOM
, donc brython
est utilisé à cet effet.
local_storage
, alors, qu'est-ce que local_storage
? #🎜🎜##🎜🎜#Hé, nous utilisons local_storage
dans brython
, mais il n'est pas défini par python
, mais c'en est un des API de stockage de données fournies par HTML 5
, qui peuvent conserver des blocs de données de paires clé-valeur dans le navigateur. #🎜🎜##🎜🎜#Montrons maintenant les opérations de stockage et de suppression à l'aide de brython
. #🎜🎜##🎜🎜#Importer la bibliothèque : #🎜🎜#rrreee#🎜🎜# Les données de stockage, telles que les informations sur la valeur clé juejinName
, sont stockées sous pdudo
#🎜🎜 #rrreee #🎜🎜#Pour la requête, utilisez simplement storage[variable]
S'il est vide, renvoyez Aucun
#🎜🎜#rrreee#🎜🎜#Loop all for...in
pour compléter #🎜🎜#rrreee#🎜🎜# Vous pouvez l'utiliser également directementfor...in pour parcourir le stockage
#🎜🎜##🎜🎜# et supprimer les données ? Supprimez simplement le dictionnaire#🎜🎜#rrreee#🎜🎜#storage
Le fonctionnement est-il très similaire au dictionnaire ? Réduit les coûts d’apprentissage des développeurs. #🎜🎜##🎜🎜#Projet de production#🎜🎜##🎜🎜#Avec les prérequis ci-dessus, nous pouvons réexaminer le projet et le résumer comme une vérification d'ajout et de suppression pour localStorage
en premier. de tous Lorsque la page est chargée, nous devons d'abord parcourir les données localstorage
pour les mapper à une table
, par exemple : #🎜🎜#rrreee#🎜🎜#Le Le code ci-dessus est la traversée localStorage
, puis définissez le bouton de suppression. Après avoir combiné d'autres valeurs, chargez-les toutes dans table
, puis affichez-les sur la page. #🎜🎜##🎜🎜#Et si vous ajoutiez des données ? #🎜🎜#rrreee#🎜🎜#Le code ci-dessus affiche les valeurs dans les zones input
et textarea
, puis détermine si l'utilisateur n'a pas saisi We assemble. les données dans un dictionnaire, puis converties en chaîne, puis stockées dans localstage
. #🎜🎜##🎜🎜#Il existe d'autres opérations. Vous pouvez lire directement la description du code pour cela brython
est très simple. #🎜🎜#Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!