iT邦幫忙

2

使用原生 Javascript 做一個 todolist

前言:為了更加熟悉 LocalStorage 所以來製作一個 todolist

自我提醒 :把資料放進去 localStorage 是用 setItem(),把資料取出來是

getItem()。

複習觀念可以看我之前的文章 關於 localStorage 使用說明

範例網址

畫面

image

透過使用 localStorage 存取你所輸入的資料,在你關閉頁面標籤或瀏覽器再重新開啟時,你原本製作的清單和內容,將被呈現出來。

接下來先有 HTML 我們要先有骨架,再加上 css 包裝他的外表:

HTML

     <div class="content">
        <div class="addList">
          <input type="text" class="text"  placeholder="" required >
          <input type="button" class="send" value="加入代辦">
        </div>
        <ul class="list"></ul>   
     </div>
  </div>

我們必須要宣告 三個東西:

  1. 輸入按鈕
  2. 呈現 input 值
  3. 印出畫面

指定 DOM

let send = document.querySelector('.send');
let text = document.querySelector('.text');

let list = document.querySelector('.list');

每次在頁面讀取時,使用 getItem() 方法從 localStorage 取出資料,並透過 JSON.parse() 方法將資料轉換成原本的格式。然而第一次在提取資料會取不到資料,因此需要建立一個新的空陣列:

let data =  JSON.parse(localStorage.getItem("todolist"))||[];

使用者點擊畫面 使用監聽事件

send.addEventListener('click', addTodo);

製作一個 名為 addData 的 function 我們要製作一個物件,讓把物件存進 localStorage。
hint : localStorage setItem() 裡面的東西 我要把它轉字串喔

JSON.stringify 將陣列轉換為 JSON 字串

function addData(e){
 e.preventDefault;
 // 找到localStorage 存入 裡面的值 使用setItem()
 // 撈出輸入鍵的值
let text =document.querySelector('.text').value;
 // 因為要把輸入的值變成 陣列 所以製作一個空物件 
 let todo ={
   myItem: text
 }
 //在一開始的資料宣告let data (array) 塞進東西
 // 建立一個物件,之後新增的檔案會存放在此
 data.push(todo);
 // 這是更新畫面的function
 updateList(data);
 // 存在Localstoreage
 localStorage.setItem('myItem', JSON.stringify(data));
};
 

把接受來的畫面渲染出畫面,製作一個 updateList 的 function

function updateList(data){
  let str ='';
  let len =data.length;
  for(let i =0;i<len;i++){
     str += `<li>  <a href="#" data-num =${i}>
             <i class="fa fa-times">
              </i></a> <span>${data[i].myItem} </span>   
              </li>`
  }
  list.innerHTML =str;

}

<li>
           `

 接下來是呈現像這樣的畫面:

  • 確認是否可以新增 list
  • 從檢查者工具看是否 application 看是否有存進資料。

image

接下來做刪除功能喔,使用 dataset 及 data-* 屬性來做刪除。

製作一個 function 叫做 toggleData 可以刪除功能喔。


function toggleData(e) {
   
    // 使用dataset 取得屬性資料
    var num = e.target.dataset.num;
    console.log(num);
    if (e.target.nodeName !== 'A') {
        return;
    }
    //找到a連節以外的節點就中斷
     // 利用js的splice()刪除array 功能
    data.splice(num, 1);
    //刪除資料、讓?在重新更新
    localStorage.setItem('myItem',JSON.stringify(data));
   
    update(data);

}

結語:這樣大概就是一個十分簡單的 todolist 做出來了,不管你有沒有懂,我來分享一個小小想法,就是試著把方法說出來,不看文章就算是自說自話也好,對著空氣,把你的邏輯說出來吧!如果真的想不到再看一下別人是怎麼做的。
下一個單元預告,我們來結合之前所做的 bmi 計算器,來做個可以有記錄和刪除的計算機(希望拉~)


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1

範例是Beemo好可愛,加油,期待後續文章

yolala iT邦新手 5 級 ‧ 2020-02-22 19:39:11 檢舉

感謝你喔 這是本人最愛動畫

我要留言

立即登入留言