15 complete code part

soyaine · soyaine · commit 45617f3631c2 · 2017-08-05T22:32:49.000+08:00
diff --git a/15 - LocalStorage/README.md b/15 - LocalStorage/README.md
@@ -4,7 +4,7 @@
 > 简介：[JavaScript30](https://javascript30.com) 是 [Wes Bos](https://github.com/wesbos) 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 15 篇。完整指南在 [GitHub](https://github.com/soyaine/JavaScript30)，喜欢请 Star 哦♪(^∇^*)
 
 > 创建时间：2017-07-24    
-最后更新：2017-07-27
+最后更新：2017-08-05
 
 ## 实现效果
 ## 知识点
@@ -31,4 +31,6 @@ this 获取当前 form，是从 submit 事件获取到的。
 this.querySelector('[name=item]'); 获取其中的输入框
 
 this.reset(); 
-以清空 input 中正在输入的值
+以清空 input 中正在输入的值
+
+使用 localStorage 的时候，直接传入 items 得到的是 [object Object]，所以需要在把数据传进去之前就把内容转换成 String 类型的数据。
diff --git a/15 - LocalStorage/index-SOYAINE.html b/15 - LocalStorage/index-SOYAINE.html
@@ -22,13 +22,17 @@ <h2>LOCAL TAPAS</h2>
     <form class="add-items">
       <input type="text" name="item" placeholder="Item Name" required>
       <input type="submit" value="+ Add Item">
+	  <input class="check-all" type="button" value="Check All">
+	  <input class="uncheck-all" type="button" value="Uncheck All">
+	  <input class="delete-all" type="button" value="Delete All">
+	  
     </form>
   </div>
 
 <script>
   const addItems = document.querySelector('.add-items');
   const itemsList = document.querySelector('.plates');
-  const items = [];
+  var items = JSON.parse(localStorage.getItem('items')) || [];
   
   function addItem(e) {
       e.preventDefault();
@@ -40,23 +44,60 @@ <h2>LOCAL TAPAS</h2>
       items.push(item);
       this.reset();
       populateList(items, itemsList);
+	  localStorage.setItem('items', JSON.stringify(items));
       console.log(text);
   }
 
   function populateList(plates = [], plateslist) {
       plateslist.innerHTML = plates.map((plate, i) => {
           return `
             <li>
-                <label>${plate.text}</label>
+				<input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} >
+                <label for="item${i}">${plate.text}</label>
             </li>
           `;
       }).join('');
   }
-    
+
+  function toggleDone(e) {
+	  if (!e.target.matches('input')) return;
+	  const el = e.target;
+	  const index = el.dataset.index;
+	  items[index].done = !items[index].done;
+	  populateList(items, itemsList);
+	  localStorage.setItem('items', JSON.stringify(items));
+	  console.log(el.dataset.index);
+  }
   addItems.addEventListener('submit', addItem);
+  itemsList.addEventListener('click', toggleDone);
+  populateList(items, itemsList);
 
+	
+  const checkAllBtn = document.querySelector('.check-all');
+  const unCheckAllBtn = document.querySelector('.uncheck-all');
+  const deleteAllBtn = document.querySelector('.delete-all');
+  
+  checkAllBtn.addEventListener('click', () => {
+  	items.forEach(item => {
+  		item.done = true;	  
+  	});
+    populateList(items, itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+  });  
+	
+  unCheckAllBtn.addEventListener('click', () => {
+  	items.forEach(item => {
+  		item.done = false;
+  	});
+  	populateList(items, itemsList);
+    localStorage.setItem('items', JSON.stringify(items));
+  });  
+	
+  deleteAllBtn.addEventListener('click', () => {
+  	items = [];
+  	populateList(items, itemsList);
+   	localStorage.setItem('items', JSON.stringify(items));
+  });
 </script>
-
-
 </body>
 </html>
