50projects50days知识点-33-notes-app

示例网址：

https://50projects50days.com/projects/notes-app/
http://50projects.tc.cluski.top/50projects50days/notes-app/

效果：

思路：

1. 点击Add Note按钮之后，会在屏幕上添加一个标签。这个标签分为2个部分，顶部的工具栏和下面的显示/编辑区域。
2. 默认新增加的便签是编辑模式，输入了一段文字之后，点击右上角的显示按钮之后，便签有编辑模式转变为了显示模式。右上角的显示按钮由显示模式变为了编辑模式。再次点击编辑按钮之后，便签又会进入编辑模式。
3. 为了保存便签中的内容，在点击编辑/显示/删除按钮之后，会将画面中所有的便签进行一次快照，并将便签的内容以JSON的形式存储在localStorage中。

JSON

js中可以使用JSON.stringify(object)来序列化一个对象；使用JSON.parse(string)来反序列化一个字符串。

参考链接：

JSON.stringify() - JavaScript | MDN (mozilla.org)

JSON.parse() - JavaScript | MDN (mozilla.org)

localStorage

在此例子中将便签中的内容保存到了localStorage中。

// 设置到localStorage
localStorage.setItem('notes', JSON.stringify(notes))

// 从localStorage中读取内容
const notes = JSON.parse(localStorage.getItem('notes'));

参考链接：

Window.localStorage - Web API 接口参考 | MDN (mozilla.org)