【從零開始學JavaScript】實作練習 - To Do List製作(二)

To Do List

前言

此次專案主要分為四大功能 : 新增物品、編輯物品、刪除物品與清空list。
這次文章先建立基本變數與方法

Local Storage

在HTML5中，有加入了一個LocalStorage特性，此功能就類似Cookie，能夠儲存資訊於Client端。而與SessionStorage的唯一區別就在於，LocalStorage屬於永久性儲存，而SessionStorage屬於當會話結束的時候，其中的鍵值會被清空。

JavaScript重點

基本變數設置

利用class="grocery-form"抓取整個Form

1	const form = document.querySelector(".grocery-form");

利用class="alert"抓取警告訊息<p>元素

1	const alert = document.querySelector(".alert");

利用id="grocery"抓取輸入方格

1	const grocery = document.getElementById("grocery");

利用class="submit-btn"抓取提交按鈕

1	const submitBtn = document.querySelector(".submit-btn");

利用class="grocery-container"抓取list區域

1	const container = document.querySelector(".grocery-container");

利用class="grocery-list"抓取包含所有項目的<div>元素
1
const list = document.querySelector(".grocery-list");

利用class="clear-btn"抓取清空list按鈕

1	const clearBtn = document.querySelector(".clear-btn");

LocalStorage方法建立 :

我們在LocalStorage中，有個名為”list”的JSON物件，其中用{"id" : "xxxxxx", "value" : "xxxx"}的方式來儲存資料

獲得JSON物件至LocalStorage中

function getLocalStorage() {

    //將list的內容提取出來(temp的型態為String)
    let temp = localStorage.getItem("list");
    
    //如果list物件中有東西    
    if(temp){
    
        //則回傳傳換為物件型態的temp，並蒐集所有物件進一個陣列
        return JSON.parse(temp);
    }else{
        return [];
    };
};
```  
> * `localStorage.getItem` : 可以取得LocalStorage中的內容
> * `JSON.parse(JSON字串)` : 可以將`JSON字串`轉化為JavaScript的物件，並將所有物件皆放入一個陣列中


* 新增一筆JSON物件至LocalStorage中
```javascript=
function addToLocalStorage(id, value) {

    //新增一筆JS物件
    const grocery = { id, value };
    
    //取得目前LocalStorage的所有物件，並存入陣列item中
    let items = getLocalStorage(); 
    
    //將物件塞入陣列
    items.push(grocery);
    
    //將items轉回字串型態，並塞回list中
    localStorage.setItem("list", JSON.stringify(items));
};

items.push() : 可以添加一或多個元素至陣列的末端

localStorage.setItem() : 將資料暫存的內容重新刷新一次

從LocalStorage裡移除一筆物品

//輸入欲刪除物品的id
function removeFromLocalStorage(id) {

    //取得目前LocalStorage的所有物件，並存入陣列item
    let items = getLocalStorage();
    
    //利用Array.filter去篩選該物件以外的其他物件
    items = items.filter(function (item) {
        if (item.id !== id) {
            return item;
        };
    });
    
    //將items轉回字串型態，並塞回list中
    localStorage.setItem("list", JSON.stringify(items));
};

Array.filter() : 會回傳一個篩選過後的陣列，很適合用在搜尋符合條件的資料

編輯LocalStorage中的一筆物品

//根據id和value去搜尋想要的物品
function editLocalStorage(id, value) {

    //取得目前LocalStorage的所有物件，並存入陣列item
    let items = getLocalStorage();

    //利用Array.map()找出想要的物品，並更改其value
    items = items.map(function (item) {
        if (item.id === id) {
            item.value = value;
        };
        return item;
    });
    
    //最後把items轉回字串型態，並塞回list中
    localStorage.setItem("list", JSON.stringify(items));
};

Array.map() : 需要回傳一個值，他會透過函式內所回傳的值組合成一個陣列。

如果不回傳則是undefined

* 回傳數量等於原始陣列的長度

To Do List

前言

Local Storage

JavaScript重點

引用與參考來源