Javascript 使用HTML将待办事项列表数据保存到本地存储

因此，如果我想将所有待办事项保存在本地存储器中，并在重新启动计算机或刷新页面时检索，则页面上的所有事项都会按其原始顺序显示

//检查规格
$（“ol”）。在（“单击”，“li”，函数（）上{
$（此）.toggleClass（“已完成”）；
});
//单击X删除要执行的操作
$（“ol”）。在（“单击”，“跨距”，函数（事件）{
$（this.parent（）.fadeOut（500，function（））{
$（this.remove（）；
});
event.stopPropagation（）；
});
$（“输入[type='text'））。按键（函数（事件）{
if（event.which==13）{
//抓取键入的文本
var todoText=$（this.val（）；
$（此）.val（“”）；
//创建新的LI并添加到UL
$（“ol”）。追加（“
”+todoText+”
）
}
});
$（“.fa plus”）。单击（函数（）{
$（“输入[type='text'））.fadeToggle（）；
})；

h1{
背景#2980b9；
颜色：白色；
保证金：0；
填充：10px 15px；
文本转换：大写；
字体大小：24px；
字体大小：正常；
}
iframe{
浮动：左；
}
ol{
/*要点
列表样式：无；
*/
保证金：0；
填充：0；
字号：18px；
}
身体{
背景色：rgb（13168108）；
}
李{
背景：#fff；
高度：30px；
线高：30px；
颜色：#666；
}
李：第n个孩子（2n）{
背景#d3；
}
跨度{
高度：30px；
宽度：0px；
右边距：20px；
文本对齐：居中；
颜色：白色；
显示：内联块；
过渡：0.2s线性；
不透明度：0；
背景：#e74c3c
}
李：悬停跨度{
宽度：30px；
不透明度：1.0；
}
输入{
字号：18px；
宽度：100%；
填充：13px 13px 13px 20px；
框大小：边框框；
边框：3倍实心rgba（0,0,0,0）；
颜色：#2980b9；
背景色：#e4；
}
输入：焦点{
背景：白色；
边框：3倍纯绿；
/*输入框的轮廓
大纲：无*/
}
法加{
浮动：对；
}
#容器{
宽度：360px；
保证金：60像素自动；
背景#d3；
盒影：0.3pxRGBA（0,0,0,0.1）；
}
.完成{
颜色：红色；
文字装饰：线条贯通；
}

待办事项清单
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
} );
待办事项清单
范例

//检查规格
$（“ol”）。在（“单击”，“li”，函数（）上{
$（此）.toggleClass（“已完成”）；
});
//单击X删除要执行的操作
$（“ol”）。在（“单击”，“跨距”，函数（事件）{
$（this.parent（）.fadeOut（500，function（））{
$（this.remove（）；
});
event.stopPropagation（）；
});
$（“输入[type='text'））。按键（函数（事件）{
if（event.which==13）{
//抓取键入的文本
var todoText=$（this.val（）；
$（此）.val（“”）；
//创建新的LI并添加到UL
$（“ol”）。追加（“
”+todoText+”
）
}
});
$（“.fa plus”）。单击（函数（）{
$（“输入[type='text'））.fadeToggle（）；
})；

h1{
背景#2980b9；
颜色：白色；
保证金：0；
填充：10px 15px；
文本转换：大写；
字体大小：24px；
字体大小：正常；
}
iframe{
浮动：左；
}
ol{
/*要点
列表样式：无；
*/
保证金：0；
填充：0；
字号：18px；
}
身体{
背景色：rgb（13168108）；
}
李{
背景：#fff；
高度：30px；
线高：30px；
颜色：#666；
}
李：第n个孩子（2n）{
背景#d3；
}
跨度{
高度：30px；
宽度：0px；
右边距：20px；
文本对齐：居中；
颜色：白色；
显示：内联块；
过渡：0.2s线性；
不透明度：0；
背景：#e74c3c
}
李：悬停跨度{
宽度：30px；
不透明度：1.0；
}
输入{
字号：18px；
宽度：100%；
填充：13px 13px 13px 20px；
框大小：边框框；
边框：3倍实心rgba（0,0,0,0）；
颜色：#2980b9；
背景色：#e4；
}
输入：焦点{
背景：白色；
边框：3倍纯绿；
/*输入框的轮廓
大纲：无*/
}
法加{
浮动：对；
}
#容器{
宽度：360px；
保证金：60像素自动；
背景#d3；
盒影：0.3pxRGBA（0,0,0,0.1）；
}
.完成{
颜色：红色；
文字装饰：线条贯通；
}

待办事项清单
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
} );
待办事项清单
范例

节日快乐

你的编码愿望得到了满足。这是一份礼物，送给你，你必须是一个好人，并张贴更好的例子，记住人们不是来为你写代码的

你的例子中缺少很多东西

将项目添加到列表中

• 将项目添加到列表时更新本地存储

允许对列表进行排序

• 更新列表时更新本地存储

允许将任务项标记为已完成

• 项目完成时更新本地存储

允许删除任务项

• 删除任务时更新本地存储

加载本地存储的任务

我想这涵盖了你想要这个剧本做的所有事情。现在它变得更清晰了吗

工作示例：

HTML

<iframe src="https://free.timeanddate.com/clock/i5zr5d5i/n1991/szw110/szh110/hoc09f/hbw0/hfc09f/cf100/hnce1ead6/fas30/fdi66/mqc000/mql15/mqw4/mqd98/mhc000/mhl15/mhw4/mhd98/mmc000/mml10/mmw1/mmd98/hhc00f/hhs2/hmcf00/hms2/hsv0" frameborder="0" width="110"
height="110"></iframe>
<div id="container">
  <h1>To-do List <i class="fa fa-plus"></i></h1>
  <form id="task-list">
    <input type="text" placeholder="Add a To-Do" id="task">
    <button type="submit"></button>
  </form>
  <ol id="sortable">
    <li id="task-EXAMPLE"><span><i class="fa fa-trash"></i></span>
      <label>EXAMPLE</label>
    </li>
  </ol>
</div>

待办事项清单

例子

第一次加载时，将没有存储，因此我们可以从HTML中读取示例。正如您将看到的，一旦您进行了更新，情况将不再如此

Q:为什么要使用

A:

喜欢有一个提交按钮。它不需要它，但是有了它会在我不想讨论这个问题的方面有很大帮助

JavaScript

$(function() {
  $("#sortable").on("click", function(event) {
    console.log(event.target);
    var $thatItem = $(event.target).parents("li");
    switch (event.target.nodeName) {
      case "SPAN":
      case "I":
        $thatItem.fadeOut(500, function() {
          $thatItem.remove();
          $("#sortable").sortable("refresh");
        });
        break;
      case "LABEL":
        $thatItem.toggleClass("completed");
        break;
    }
    setTimeout(function() {
      updateLocalStorage($("#sortable"));
    }, 500);
    event.stopPropagation();
  });

  $("#task-list").submit(function(event) {
    event.preventDefault();
    // Grabbing the text typed
    var todoText = $("#task").val();
    addListItem($("#sortable"), todoText, false);
    // Clear the text field
    $("#task").val("");
    updateLocalStorage($("#sortable"));
  });

  $(".fa-plus").click(function() {
    $("#task-list").fadeToggle();
  });
  $("#sortable").sortable({
    update: function(e, ui) {
      updateLocalStorage($(this));
    }
  }).disableSelection();

  function addListItem($t, s, c) {
    //create a new LI
    var $li = $("<li>", {
      id: "task-" + s.replace(" ", "_")
    });
    if (c) {
      $li.addClass("completed");
    }
    var $wrap = $("<span>").appendTo($li);
    $wrap.append($("<i>", {
      class: "fa fa-trash"
    }));
    $li.append($("<label>").html(s));
    $li.appendTo($t);
    $t.sortable("refresh");
  }

  function updateLocalStorage($list) {
    var tasks = {};
    $list.find("li").each(function(ind, elem) {
      var task = $(elem).text().trim();
      var completed = $(elem).hasClass("completed");
      tasks[task] = completed;
      if (typeof(Storage) !== "undefined") {
        localStorage.setItem("tasks", JSON.stringify(tasks));
      }
    });
  }

  if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
    if (localStorage.getItem("tasks") !== "undefined") {
      var localTasks = JSON.parse(localStorage.getItem("tasks"));
      // Grab stored tasks
      $("#sortable").find("li").remove();
      $.each(localTasks, function(task, status) {
        addListItem($("#sortable"), task, status);
      });
    }
  } else {
    // Sorry! No Web Storage support..
  }
});

$（函数（）{
$（“#可排序”）。在（“单击”上，函数（事件）{
console.log（event.target）；
var$thatItem=$（event.target）.parents（“li”）；
开关（event.target.nodeName）{
案例“SPAN”：
案例“一”：
$thatItem.fadeOut（500，函数（）{
$thatItem.remove（）；
$（“#可排序”）。可排序（“刷新”）；
});
打破
案例“标签”：
$thatItem.toggleClass（“已完成”）；
打破
}
塞蒂