摘要：完整中文版指南及視頻教程在從零到壹全棧部落。當頁面重新刷新或者關閉之前，執行清除頁面的緩存。慎用，尤其在生產環境中。

(Node+Vue+微信公眾號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座)

作者：?黎躍春-追時間的人 
簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用?，F在你看到的是這系列指南的第 14 篇。完整中文版指南及視頻教程在 從零到壹全棧部落。

第十五天主要是練習LocalStorage（本地存儲）以及時間委托的使用，使用場景是一個簡單的todo list的應用，實現基本的添加item，切換完成狀態，將所有todo項存儲在localstorage中，保證刷新瀏覽器后數據不丟失。

提前預定義好所有用到的變量；

// 添加item的按鈕
const addItems = document.querySelector(".add-items"); 
// todolist列表
const itemsList = document.querySelector(".plates"); 
// 本地緩存的所有todoitem
const items = JSON.parse(localStorage.getItem("items")) || []; 

為addItems按鈕添加事件函數，添加一個新的todo item并存儲到本地緩存；

監聽checkbox的點擊事件，切換是否完成的狀態，并更新本地存儲，保證刷新本頁面是數據不會丟失；

分別設置兩個監聽器，監聽addItems的submit事件，和itemsList的點擊事件；

添加item的主要代碼如下

function addItem(e) {
  // 阻止默認事件的觸發，防止在提交后頁面自己刷新
  e.preventDefault(); 
  const text = this.querySelector("[name=item]").value;
  const item = {
    // ES6的簡寫形式 => text: text;
    text, 
    done: false
  };
  items.push(item);
  localStorage.setItem("items", JSON.stringify(items));
  populateList(items, itemsList);
  // 添加完數據后，重置輸入框 
  this.reset();      
}
addItems.addEventListener("submit", addItem);

監聽addItems的submit事件，當用戶點擊enter或者點擊右側的submit按鈕的時候觸發；

text,是ES6的縮寫形式，即代表text: text；
*localStorage的常用API：

localStorage.setItem(‘key’,value); -> 設置本地緩存，以key-value的形式

localStorage.getItem(‘key’); -> 根據參數key取得本地緩存中對應的值

localStorage.clear(); -> 清空本地的緩存

localStorage.removeItem(‘key’); -> 刪除key所對應的那一條本地緩存

localStorage中只能存儲字符串，所以我們經常會用到： JSON.stringify(object)將一個對象轉換為字符串，再使用JSON.parse(objSting)將一個對象字符串轉換為對象

this.reset();代表將表單重置，清空表單中的值，在我們進行了一次submit之后，如果不重置表單的話，表單中的值將不會消失，這將大大影響用戶體驗

function toggleDone(e) {
  // if(!e.target.nodeName.match("INPUT")) return;
  
  // 跳過所有的input，只處理label
  if (!e.target.matches("input")) return; 
  const node = e.target;
  const index = node.dataset.index;
  items[index].done = !items[index].done;
  localStorage.setItem("items", JSON.stringify(items));
  populateList(items, itemsList);
}
itemsList.addEventListener("click", toggleDone);

此處使用到了事件委托，所謂事件委托，我是這么理解的：

假設我們隊一個input列表進行了事件監聽，但我們如法保證，此列表在接下來的狀態下是否進行了更新，刷新等改變原來節點的操作，如果有這樣的操作出現，那么我們之前的事件監聽器就無法再起到監聽的作用；

但我們可以對input列表的父元素進行事件監聽，讓它們的父元素處于監聽狀態，當我們所點擊的元素是其子元素的話，就告訴它的子元素，執行相應的事件；

相當于委托父元素幫我們監聽所有子元素，這樣無論子元素列表進行怎么樣的更新，改變，只要父元素節點不發生改變就可以持續起到監聽的 作用。

通過e.target.matches("input")可以判斷所點擊的元素是不是input元素，e.target返回所點擊的宿主元素。

通過獲取到所點擊的列表的序號，更改其done屬性，更新后進行存儲，就可以實現完成狀態的事件。

   // 設置默認值，防止傳參數出錯的時候crash
function populateList(populates = [], place {   
    place.innerHTML = populates.map((populate, index) => {
    //之所以用‘’空字符是因為如果用null的話，會出現在html中
    return `
      

        
        ${(populate.text)}
      
    `; 
    // join()之后一定要加""，表示空字符，否則會加入逗號，造成錯誤  
  }).join(""); 
}

將所有的列表項轉化為li傳入頁面的html中

將此函數抽象出來，以方便以后實現同樣類似的操作，將一個數組中的元素動態添加到頁面的一個節點中

    // 在關閉瀏覽器之后清除緩存
    window.onbeforeunload = function (e) {
      localStorage.removeItem("items");
      // let confirmationMessage = "o/";
      e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
      // return confirmationMessage; // 如果有返回值的話，就會彈出確認框。
    };

有些時候，我們僅僅是為了練習localStorage的使用，并不想在瀏覽器中留下過多的緩存，那么這個方法就派上了用場。

當頁面重新刷新或者關閉之前，執行localStorage.removeItem("items’);清除頁面的緩存。

慎用，尤其在生產環境中。

const addItems = document.querySelector(".add-items");
const itemsList = document.querySelector(".plates");
const items = JSON.parse(localStorage.getItem("items")) || [];

function addItem(e) {
 e.preventDefault();
 const text = this.querySelector("[name=item]").value;
 const item = {
   text, // ES6的簡寫形式 => text = text;
   done: false
 };
 items.push(item);
 localStorage.setItem("items", JSON.stringify(items));
 populateList(items, itemsList);
 this.reset(); // 添加完數據后，重置輸入框      
}

function populateList(populates = [], place) { // 設置默認值，防止傳參數出錯的時候crash
 place.innerHTML = populates.map((populate, index) => {
   return `
     

       
       ${(populate.text)}
     
   `; //之所以用‘’空字符是因為如果用null的話，會出現在html中
 }).join(""); // join()之后一定要加""，表示空字符，否則會加入逗號，造成錯誤  
}

function toggleDone(e) {
 // if(!e.target.nodeName.match("INPUT")) return;
 if (!e.target.matches("input")) return; // 跳過所有的input，只處理label
 const node = e.target;
 const index = node.dataset.index;
 items[index].done = !items[index].done;
 localStorage.setItem("items", JSON.stringify(items));
 populateList(items, itemsList);
}

addItems.addEventListener("submit", addItem);
itemsList.addEventListener("click", toggleDone);

populateList(items, itemsList);

在頁面加載的時候，先獲取本地緩存的items，若存在就傳給變量items，若第一次登錄或者無item，初始化為空數組；

在頁面加載的時候先加載頁面的所有todolist，執行一遍populateList(items, itemsList);函數即可。

Github Source Code