JavaScript类内样式属性更新后未持久化 页面刷新样式消失问题

问题产生原因 #

• 加载逻辑直接丢弃了原有存储的DOM状态，所有元素都是默认新建的
  你在updateTaskList开头就清空了taskList的内容，虽然读取了localStorage中存储的DOM字符串，也临时解析成了DOM节点，但后续既没有把解析好的DOM直接写入页面，遍历节点时也完全没有用到原有节点的内容、样式属性，统一创建了内容为固定值some value的新Item实例，新实例默认没有删除线样式，原有存储的状态完全没有被用到。
• DOM查询选择器不匹配，遍历逻辑根本无法生效
  你的Item类生成的DOM元素是div标签，但你在updateTaskList里用querySelectorAll("li")查询子元素，永远查不到符合条件的节点，遍历逻辑不会运行，更谈不上还原状态。
• Item类没有提供状态恢复的入口
  类的构造函数只接收name参数，没有提供接收样式状态的参数，就算你读取到了原有节点的删除线状态，也无法在新建实例的时候还原对应样式。
• 持久化逻辑的设计方向错误
  直接把innerHTML序列化存入本地存储的方式本身就不推荐，你应该只存储业务数据（比如任务名称、是否完成的状态标记），页面加载时根据存储的业务数据重新渲染DOM，而不是直接存DOM字符串再反向解析。

内容的提问来源于stack exchange，提问作者kunalkeshan