Day15

Author: tri613

15 - LocalStorage/index-START.html

@@ -26,9 +26,55 @@ <h2>LOCAL TAPAS</h2>
   </div>
 
 <script>
+  const itemInput = document.querySelector('[name="item"]');
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
   const items = [];
+  const storage = localStorage;
+  restoreOptions();
+
+  function restoreOptions() {
+    const storageItems = (storage.items) ? JSON.parse(storage.items) : [];
+    items.push(...storageItems);
+    renderList();
+  }
+
+  function renderList() {
+    itemsList.innerHTML = items.map((item, i) => {
+      const checked = (item.done) ? "checked" : "";
+      return `
+        <li>
+          <input type="checkbox" data-index="${i}" id="item${i}" ${checked}>
+          <label for="item${i}">${item.text}</label>
+        </li>
+      `;
+    }).join("");
+  }
+
+  function addItemHandler(e) {
+    e.preventDefault();
+    const itemText = itemInput.value;
+    items.push({
+      text: itemText,
+      done: false
+    });
+    storage.setItem('items', JSON.stringify(items));
+    renderList();
+    itemInput.value = "";
+  }
+
+  function changeStateHandler(e) {
+    if (e.target.tagName.toLowerCase() === 'input') {
+      const theItemIndex = e.target.dataset.index;
+      console.log(theItemIndex);
+      const state = !items[theItemIndex].done;
+      items[theItemIndex].done = state;
+      storage.setItem('items', JSON.stringify(items));
+    }
+  }
+
+  addItems.addEventListener('submit', addItemHandler);
+  itemsList.addEventListener('click', changeStateHandler);
 
 </script>
 

README.md

@@ -22,11 +22,14 @@
 - Day9 + 10 -- 2017/01/05
 	- `console.time(name)` + `console.timeEnd(name)`
 	- `console.group(name)` + `console.groupEnd(name)`
-	-  Holding down the `Shift`key could be captured by `MouseEvents` and `KeyboardEvents` with `event.shiftKey` (true for holding down shift key)
+	-  Holding down the `Shift`key could be captured by `MouseEvents` and `KeyboardEvents` with `event.shiftKey` (true for "is holding down shift key")
 - Day11 + 12 -- 2017/01/06
 - Day13 -- PASS (欸)
 - Day14 -- 2017/01/20
 	- 這章好重要，前陣子也有認真看了一下JS裡面`by value`跟`by reference`的問題，另外開一個區塊寫XD
+- Day15 -- 2017/01/28 （新年寫code...廠廠)
+	- `JSON.parse(null)`是ＯＫ的，但`JSON.parse(undefined)`就會跳error。
+
 
 ## Notes
 ### Day14 - JavaScript References VS Copying