python | 写一个记仇本

最近背着老婆买了一个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增删改查来操作的。