TodoList-React

要实现的功能

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: '308826842@.com'
      },
      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）