如何使用 Javascript 將 css 樣式設置為本地存儲以動態創建列表？

Question

我剛剛開始了關於 Javascript 的 Udemy 課程，第一個項目是創建任務列表。 我按照教程很好地創建了它，但我想向它添加一些功能。 添加新任務時，我想添加將其標記為完成的功能。

我一直在嘗試如何使用 css （文本裝飾：直通）來做到這一點，但已經走到了死胡同。 單擊標記為“完成”的按鈕后，將調用 function 來檢查 class“檢查項”的列表項。 然后，我添加 class 名稱“check-item-style”，它將直通應用於單擊的列表項。 如果您能幫我將其插入本地存儲，並在瀏覽器重新打開后從本地存儲中“獲取”。

我會盡量保持代碼盡可能簡短。 如果可能的話，只有香草 javascript，我嘗試做一個代碼片段，但效果不佳（可能是由於本地存儲不可用）。 所以我在下面包含了短代碼。 如果沒有所有庫，某些代碼將無法正常工作，因此必須包含抱歉！

 // Define UI Vars const form = document.querySelector("#task-form"); const taskList = document.querySelector(".collection"); const taskInput = document.querySelector("#task"); //Event Listeners form.addEventListener("submit", addTask); taskList.addEventListener("click", checkTask); document.addEventListener("DOMContentLoaded", getTasks); function getTasks() { if (localStorage.getItem("tasks") === null) { tasks = []; } else { tasks = JSON.parse(localStorage.getItem("tasks")); } tasks.forEach(function(task) { const li = document.createElement("li"); li.className = "collection-item"; li.appendChild(document.createTextNode(task)); const linkCheck = document.createElement("a"); linkCheck.className = "check-item secondary-content"; linkCheck.innerHTML = '<i class="fa fa-check"></i>'; li.appendChild(linkCheck); taskList.appendChild(li); }); } function addTask(e) { if (taskInput.value === "") { alert("Add a task"); } else { const li = document.createElement("li"); li.className = "collection-item"; li.appendChild(document.createTextNode(task)); const linkCheck = document.createElement("a"); linkCheck.className = "check-item secondary-content"; linkCheck.innerHTML = '<i class="fa fa-check"></i>'; li.appendChild(linkCheck); taskList.appendChild(li); storeTaskInLocalStorage(taskInput.value); //Clear input taskInput.value = ""; } e.preventDefault(); } function storeTaskInLocalStorage(task) { let tasks; if (localStorage.getItem("tasks") === null) { tasks = []; } else { tasks = JSON.parse(localStorage.getItem("tasks")); } tasks.push(task); localStorage.setItem("tasks", JSON.stringify(tasks)); } function checkTask(e) { let check = e.target.parentElement.parentElement; if (e.target.parentElement.classList.contains("check-item")) { check.className = "check-item-style"; addStylingToLocalStorage(check.className); } } function addStylingToLocalStorage() { //Please help here }

 .check-item-style { text-decoration: line-through; padding: 10px; padding-right: 20px; padding-left: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); margin: 0px; }

 <:DOCTYPE html> <html lang="en"> <body> <script src="https.//code.jquery.com/jquery-3.5.1:js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous" ></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min:css" /> <link href="https.//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" /> <title>Task List</title> <link rel="stylesheet" href="stylesheet.css" /> <script src="app:js" defer></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" defer ></script> <div class="container"> <form id="task-form"> <div> <input type="text" name="task" id="task" /> <label for="task">New Task</label> </div> <input type="submit" value="Add Task" class="btn" /> </form> <div> <ul class="collection"></ul> </div> </div> </body> </html>

Answer 1

有一種簡單的方法可以做到這一點，而無需將CSS存儲在localStorage中。 現在，如果您的任務列表是清潔、睡眠和閱讀，那么您的 JSON 看起來像這樣：

[
    "Cleaning",
    "Sleeping",
    "Reading"
]

每個項目只是一個字符串。 如果您想跟蹤已檢查的內容，請從localStorage存儲和檢索對象數組。 這是一個示例 JSON 結構。

[
    {
        "name": "Cleaning",
        "done": true
    },
    {
        "name": "Sleeping",
        "done": true
    },
    {
        "name": "Reading",
        "done": false
    }
]

如果您重新加載頁面，您只需要根據done屬性設置任務的樣式。

編輯您的存儲 function：

function storeTaskInLocalStorage(task, done) {
  let tasks;
  if (localStorage.getItem('tasks') === null) { 
    tasks = [];
  } else {
    tasks = JSON.parse(localStorage.getItem('tasks'));
  }
  tasks.push({
    name: task,
    done: done
  });

  localStorage.setItem('tasks', JSON.stringify(tasks));
}

如何使用 Javascript 將 css 樣式設置為本地存儲以動態創建列表？

問題描述

1 個解決方案

解決方案1
0 2020-05-12 20:30:14

如何使用 Javascript 將 css 樣式設置為本地存儲以動態創建列表？

問題描述

1 個解決方案

解決方案1 0 2020-05-12 20:30:14

解決方案1
0 2020-05-12 20:30:14