最近背着老婆买了一个switch卡带，这货居然给丈母娘讲，害得我被丈母娘说还小了，不买奶粉买游戏，太气人了，我连夜用python写了个《记仇本》，画个圈圈把她记下来。
本片文章，主要关注于
python代码，而html和css将暂时被忽略。
记仇本展示
如题所述，项目已经写好了，是基于local_storage存储在本地的项目，地址如下:
该项目运行时是基于brython， 你可能想问，为什么不使用原生python来编写网页呢，这个有个误区是，网页是由html代码编写的，而原生python想要操作DOM非常难，所以brython正是为这个来操作的。
初始打开页面，因为没有数据展示，所以只有一个增加按钮。
当我们点击【画个圈圈记下来】按钮后，会刷新为新增页面，例如：
此时，我们只需要输入信息，比如 记老婆的仇，缘由为 买switch游戏透露给丈母娘，还得被骂。
此时点击记仇，就可以存储到页面上了。
此时若点击已原谅，则可以删除该记录。
brython 之 local_storage
你可能细心发现了，哎，关掉了浏览器，下次打开，怎么还会有记录在上面呢，这是因为用了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很简单的。
总结
这篇文章，是善用localStorage来作为键值对存储，以此来保证打开和关闭浏览器，不会对数据产生影响，整个项目就是围绕这个localStorage增删改查来操作的。
