localstorage added

Readme.md

-### web-shell 实习期项目
+### web-shell 实习期项目
\ No newline at end of file
+
+## Syntax
+- ```add``` title content deadline : 添加标题为title，内容为content，截至时间为dealine代办事件
+# deadline should be the format "yyyy/MM/dd"
+- ```modify``` id title = newtitle ： 修改id条事件的title/ content/ deadline
+# title be substitued by content or deadline, and space is allowed
+- ```resolve``` id ： 完成id条事件，完成事件字体变为灰色
+- ```delete``` id ： 删除id条事件
+- ```update``` ： 根据代办事件的deadline和当前时间，若超过时间则字体变为红色
\ No newline at end of file

index.html

@@ -18,7 +18,7 @@
 
   <!-- todo card display part -->
   <div id="list-todo">
-    <div id="todo-0" x-resolved="1">
+    <div id="todo-00" x-resolved="1">
       <strong>title</strong>
       <span>&nbsp;(id=0)</span>
       <p>

index.js

@@ -26,22 +26,25 @@ var id = 1;
  * @param {string} content
  * @param {Date} deadline 
  */
-function addTodoToDOM(id, title, content, deadline) {
+function addTodoToDOM(id, title, content, deadline, resolve = 0) {
   // bonus: save all todos into localStorage
 
   const newId = "todo-" + id;
   const todoElem = document.createElement("div");
   const todoTitleElem = document.createElement("strong");
+  const todoIdElem = document.createElement("span");
   const todoContentElem = document.createElement("p");
   const todoDeadlineElem = document.createElement("i");
 
   todoElem.id = newId;
   todoTitleElem.textContent = title;
+  todoIdElem.textContent = "(id=" + id + ")";
   todoContentElem.textContent = content;
 	const formatdate = format(deadline, 'yyyy/MM/dd');
 	todoDeadlineElem.textContent = formatdate;
 
   todoElem.appendChild(todoTitleElem);
+  todoElem.appendChild(todoIdElem);
 	todoElem.appendChild(todoContentElem);
 	todoElem.appendChild(todoDeadlineElem);
 
@@ -51,6 +54,8 @@ function addTodoToDOM(id, title, content, deadline) {
     return;
   }
   parentElem.appendChild(todoElem);
+
+  localStorage.setItem("todo-" + id, JSON.stringify({ "title": title, "content": content, "deadline": formatdate, "resolve": resolve}));
 }
 
 /**
@@ -64,6 +69,9 @@ function resolveTodo(id) {
 
   todo.setAttribute("x-resolved", "1");
   todo.style.color = "gray";  // set color to gray
+
+  let item = JSON.parse(localStorage.getItem("todo-" + id) || '0');
+  localStorage.setItem("todo-" + id, JSON.stringify({"title": item.title, "content": item.content, "deadline": item.deadline, "resolve": 1}));
 }
 
 function deleteTodo(id) {
@@ -76,6 +84,8 @@ function deleteTodo(id) {
   {
     todo.parentNode.removeChild(todo);
   }
+
+  localStorage.removeItem("todo-" + id);
 }
 
 /**
@@ -108,10 +118,28 @@ function updateOverdueStatus(id) {
 function initializeTodoApp() {
   // bonus: load all saved todos from localStorage
 
+  if(localStorage.getItem("todo-0")) { // 取回localstorage中存储的全局变量id
+    let item = JSON.parse(localStorage.getItem("todo-0") || '0');
+    id = parseInt(item.id);
+  }
+  for(let i = 1; i < id; i++) {
+    let elem = localStorage.getItem("todo-" + i);
+    if(elem) {
+      let item = JSON.parse(elem);
+      addTodoToDOM(i, item.title, item.content, parse(item.deadline, 'yyyy/MM/dd', new Date()), item.resolve);
+      if(item.resolve) {
+        resolveTodo(i);
+      }
+      else {
+        updateOverdueStatus(i);
+      }
+    }
+  }
+
   const addTodoRegex = /^add\s+(\w+)\s+(\w+)\s+(\d+)\/(\d+)\/(\d+)$/;
   const modifyTodoRegex = /^modify\s+(\d+)\s+(\w+)\s*=\s*(.+)/;
-  const resolveTodoRegex = /^resolve\s+(\d+)/;
-  const deleteTodoRegex = /^delete\s+(\d+)/;
+  const resolveTodoRegex = /^resolve\s+(\d+)\s*/;
+  const deleteTodoRegex = /^delete\s+(\d+)\s*/;
   const updateTodoRegex = /^update\s*/;
 
   const shellInputElem = /** @type {HTMLInputElement | null} */ (document.getElementById("input-todo"));
@@ -119,7 +147,6 @@ function initializeTodoApp() {
     alert("Failed to get input element");
     return;
   }
-
   // set event listener
   shellInputElem.addEventListener("keyup", function (ev) {
     if (ev.key === "Enter") {
@@ -134,6 +161,8 @@ function initializeTodoApp() {
         }
         deadline.setFullYear(parseInt(match[3]), parseInt(match[4]) - 1, parseInt(match[5]));
         addTodoToDOM(id++, match[1], match[2], deadline);
+
+        localStorage.setItem("todo-0", JSON.stringify({"id": id})); // 每次修改id，同时在localstorage对应位置修改id的值
       } 
       else if (modifyTodoRegex.test(inputContent)) {
         let match = inputContent.match(modifyTodoRegex);
@@ -152,10 +181,16 @@ function initializeTodoApp() {
         if(match[2] === "title") {
           const elem = modifyElem.getElementsByTagName("strong"); // getElementByTagName returns an array, so elem should be used with index
           elem[0].textContent = match[3];
+
+          let item = JSON.parse(localStorage.getItem("todo-" + match[1]) || '0');
+          localStorage.setItem("todo-" + match[1], JSON.stringify({"title": match[3], "content": item.content, "deadline": item.deadline, "resolve": item.resolve}));
         }
         else if(match[2] === "content") {
           const elem = modifyElem.getElementsByTagName("p");
           elem[0].textContent = match[3];
+
+          let item = JSON.parse(localStorage.getItem("todo-" + match[1]) || '0');
+          localStorage.setItem("todo-" + match[1], JSON.stringify({"title": item.title, "content": match[3], "deadline": item.deadline, "resolve": item.resolve}));
         } else if(match[2] === "deadline"){
             const elem = modifyElem.getElementsByTagName("i");
             var date = match[3].split("/");
@@ -168,25 +203,28 @@ function initializeTodoApp() {
             date[1] = date[1].trim();
             date[2] = date[2].trim();
             elem[0].textContent = date[0] + "/" + date[1] + "/" + date[2];
+
+            let item = JSON.parse(localStorage.getItem("todo-" + match[1]) || '0');
+            localStorage.setItem("todo-" + match[1], JSON.stringify({"title": item.title, "content": item.content, "deadline": elem[0].textContent, "resolve": item.resolve}));
         }
       }
       else if(resolveTodoRegex.test(inputContent)) {
         let match = inputContent.match(resolveTodoRegex);
-        if(!match || match.length !== 1)
+        if(!match || match.length !== 2)
         {
           alert("Failed to get resolve element");
           return;
         }
-        resolveTodo(parseInt(match[0]));
+        resolveTodo(parseInt(match[1]));
       }
       else if(deleteTodoRegex.test(inputContent)) {
         let match = inputContent.match(deleteTodoRegex);
-        if(!match || match.length !== 1)
+        if(!match || match.length !== 2)
         {
           alert("Failed to get delete element");
           return;
         }
-        deleteTodo(parseInt(match[0]));
+        deleteTodo(parseInt(match[1]));
       }
       else if(updateTodoRegex.test(inputContent)) {
         for(var i = 1; i < id; i++) {