3、打造多功能 Markdown 笔记本应用：从基础到进阶

打造多功能 Markdown 笔记本应用：从基础到进阶

在开发 Markdown 笔记本应用时，我们会遇到诸多技术挑战与需求，如安全地展示 HTML、保存和加载笔记、管理多个笔记等。下面将详细介绍如何逐步实现这些功能。

1. HTML 展示与安全考量

在应用中，文本插值会自动转义 HTML 标签，这是为了防止注入攻击，提高应用的安全性。例如，在评论系统中，如果不进行转义，恶意用户可能会插入恶意 JavaScript 代码，引发跨站脚本攻击（XSS 攻击）。

不过，我们可以使用 v-html 指令来渲染动态 HTML。示例代码如下：

<!-- Preview pane -->
<aside class="preview" v-html="notePreview">
</aside>

这里， v-html 会将 notePreview 的值作为 HTML 字符串插入到页面中。需要注意的是，不要在用户生成的内容上使用 v-html ，以免执行恶意代码。

另外，还有一个与文本插值等效的指令 v-text ，它的行为与 v-html 类似，但会像经典文本插值一样转义 HTML 标签。

2. 笔记的保存与加载

为了避免关闭或刷新应用时笔记丢失，我们可以使用浏览器提供的 localStora