要实现的功能
localStorage存储数据
使用localStorage存储用户数据，异步更新数据，实现在使用过程中掉线了也能继续使用应用的功能。
如果需要访问localStorage对象存储的数据，那么访问该数据的页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上；基于localStorage的这种特性，如果该TodoList要使用localStorage存储数据，那么当用户注册一个账号时，返回给用户的页面的地址必须是唯一的，如果使用的还是同一个地址，那么在同一台电脑上注册两个账号，使用账号1登录并使用localStorage存储一些数据，再使用账号2登录，因为两个账号访问的是同一个地址，所以，账号2同时可以获取并设置账号1使用localStorage存储的数据，因此，如果要使用localStorage，就必须为每个账号绑定不同的地址
验证上面的方法：
在打开页面时读取使用localStorage创建的数据，如果不存在则创建数据，如果存在，则在该数据上添加一些信息，并打印出来，来验证上面的想法是否正确。
操作方式：先用账号1登录应用，此时会创建localStorage数据，然后使用账号2登录应用，如果此时打印的数据存在有账号1的数据，则说明账号2获取到了账号1中的数据
结论： 经验证，上面关于localStorage的猜想是正确的，用账号2登录应用，可以获取到账号1的数据。
验证代码：
let storage = window.localStorage.getItem('name');
if (storage) {
window.localStorage.setItem('name', storage + '再次访问=== ');
} else {
window.localStorage.setItem('name', '创建localStorage=== ');
}
console.log(window.localStorage.getItem('name'));
要实现这种方式是否需要用到 路由？？？
使用IndexedDB存储数据
IndexedDB也像localStorage一样存在同源问题（对于数据的访问必须来自同一地址、同一端口、使用相同协议），但是可以通过为不同用户创建不同的数据库或者是使用同一数据库，但是不同的存储空间对象来存储用户信息。
再者，IndexedDB可以存储对象，便于对数据进行结构化的存储
实现思路
- 数据结构
将用户信息存放在一个数据中，每个用户分配不同的对象存储空间，数据库中，对象存放的数据结构如下：
id: userId,
accountInfo: {
// username: '张111',
// id: '1111',
// email: '[email protected]'
},
todoInfo: [
{
id:
// 清单名称
folderName: '我的一天',
todos: [ {
id: ,
todoName: ,
folderObj: ,
isFinished: ,
ifFlag: ,
updateTime: ,
}],
isDispFinishedTodos: false
},
{
// 清单名称
folderName: 'Todo',
todos: [],
isDispFinishedTodos: false
}
],
- 流程
- 当用户登录成功后，判断数据库是否存在，如果不存在，则创建数据库，并将用户数据保存到数据库
- 添加检测网络在线状态的事件
- 当进行数据修改时，先将数据保存在本地，使用本地数据进行渲染，然后将数据保存到IndexedDB数据库，保存到数据库之后，如果当前为网络在线状态，则将数据上传到服务器的数据库进行保存，如果网络不在线，则可以通过检测网络在线状态的事件对其检测，当网络连接了，就将数据上传到服务器
每个用户创建不同的对象存储空间，
当注册一个用户时，创建一个对象存储空间，
当进入页面时，先判断数据库是否存在，如果数据库存在，则判断当前用户对应的对象存储空间是否存在，如果不存在，则创建，如果存在则直接读取或操作
组件划分
APP组件 —— 整个应用最外层包裹组件（App.jsx）
-
用户登入面板组件（UserDialog.jsx）
- 注册组件（SignUpDialog.jsx）
- 登录组件（SignInDialog.js）
- 忘记密码组件（ForgotPasswordDialog.jsx）
-
左侧列表组件（LeftAsideDialog.jsx）
- 清单信息组件（TodoFolderDialog.jsx）
- 创建清单组件（CreateFolderDialog.jsx）
- 搜索组件
-
右侧content组件（ContentDialog.jsx）
- 标题组件（TitleDialog.jsx）
- add组件 —— 添加任务组件（AddTodo.jsx）
- 当前清单中未完成任务组件 —— 显示当前清单未完成任务，一条未完成任务为一个组件（TodoItem.jsx）
- 显示已完成任务组件 —— 显示清单已完成任务（CompletedTodoItem.jsx）