如何使用 Javascript 将 css 样式设置为本地存储以动态创建列表？答案

【问题标题】：How to set css style to local storage for dynamically created list using Javascript?如何使用 Javascript 将 css 样式设置为本地存储以动态创建列表？
【发布时间】：2020-08-28 17:03:06
【问题描述】：

我刚刚开始了一个关于 Javascript 的 Udemy 课程，第一个项目是创建一个任务列表。我根据教程很好地创建了它，但我想向它添加一些功能。添加新任务时，我想添加将其标记为完成的功能。

我一直在尝试如何使用 css（text-decoration: line-through）来做到这一点，但遇到了死胡同。一旦单击标记为“完成”的按钮，就会调用一个函数来检查“check-item”类的列表项。然后我添加类名“check-item-style”，它将直通应用于单击的列表项。如果您能帮我将其插入本地存储，并在浏览器重新打开后从本地存储中“获取”。

我会尽量保持代码简短。如果可能的话，只有香草 javascript！我试着做一个代码 sn-p 但它工作得不是很好（可能是由于本地存储不可用），所以我在下面包含了短代码。如果没有所有库，某些代码将无法正常工作，因此必须包含抱歉！

// 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>

【问题讨论】：

标签： javascript css json local-storage dynamic-list

【解决方案1】：

有一种简单的方法可以做到这一点，而无需将 CSS 存储在 localStorage 中。现在，如果你的任务列表是打扫、睡觉和阅读，那么你的 JSON 看起来像这样：

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

每个项目只是一个字符串。如果您想跟踪已检查的内容，请从localStorage 存储和检索对象数组。这是一个示例 JSON 结构。

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

如果您重新加载页面，您只需根据done 属性设置任务样式。

编辑您的存储功能：

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));
}

【讨论】：

您好！感谢您花时间回答。我刚刚尝试了您的解决方案，但我的本地存储看起来仍然和以前一样，我错过了什么吗？您是否能够测试自己以查看它是否适合您（如果可能）？
我明天测试一下。您是否更改了任务数组的格式？此外，旧数组将无法工作，您必须先重置 localStorage，然后再尝试新方法。