添加一项笔记

• 表单容器（form container）：所有的用户输入微件并封装包含在一个表单内。
• 将会作为笔记的名称，并且也将会用于显示那些现有的笔记项目。
• 笔记：是笔记当中的主题或内容。
• 提交按钮（submit button）：单机该按钮将会触发保存笔记的操作。

显示现有笔记的列表（listview）

• 包含笔记的标题的行：该行将作为一个链接，指向包含笔记主题内容的页面。
• 区域首部行（section header row）：这可能会是个不错的功能。

查看/删除一项笔记

• 用于显示笔记本标题的标签。
• 包含笔记内容的段落。
• 删除按钮。
• 后退按钮。

线框图

添加笔记线框图

显示笔记部分的线框图

显示笔记以及删除按钮部分的线框图

存储Notekeeper中的数据

• 数据库（MySQL，SQL Server以及PostgreSQL）：虽然数据库是一种理想的解决方案，不过这对于即将要开发的这个app来说，则会有些相对复杂，因为 女婿需要Internet链接，并且还需要一个服务器端的组件作为中间层来讲笔记信息保存至数据库。
• 文本文件：优点是占有空间很小，弊端在于Notekeeper作为一个这样Web app是不能将文件仅保存于用户的设备当中的。
• 本地存储：是一个相对较新的技术方案，它将信息以键值对的方式存储在用户的设备当中。虽然会有大小的限制，但是这对于纯文本信息来说会是一个相当大的规模。大多数逐流浏览器都支持该技术，同时它也可以用在离线模式当中。
• 本次采用本地存储

localStorage.setItem("Keyname""this is the value I am saving");
//or
localSorage["keyname"]="this is the value I am saving";

• 将复杂对象转换为字符串-序列化

local Storage["Notekeeper"]=JSON.stringify(Notekeeper);

• 获取改数值

var family = localStorage.getItem("my family")
//or
var family = localStorage["my family"]

• 反序列化

var getFamily = JSON.parse(localStorage["family"]);

• 彻底删除该键

localStorage.removeItem("family");
delete localStorage["family"]