JavaScript注释

Question

我已经使用Vanilla Javascript和localstorage建立了一个待办事项列表。待办事项列表具有以下键值：

nasm -f elf64 Program.s -o Program.o -Werror 
gcc Program.o -o a.out

这些值在我的网站上显示得很好（仅显示标题），但是当我刷新页面时，整个对象都在显示。

在刷新页面之前：

购买杂货

领取干洗

walk狗

页面刷新后：

id：0，title：买杂货，完成：false

id：1，标题：拾取干洗，完成：false

id：2，title：walk狗，完成：false

很显然，刷新页面后，我只希望标题显示在li标记内的列表上。这很麻烦，因为它仅在刷新页面后执行。

如何在页面刷新后仅显示标题？

我对Javascript还是个新手，还不太想办法。我已经使用Google搜索了将近两天了，准备把头发扯下来了！！

key: todolist
value: [[\"id:0\",\"title:buy groceries\",\"done:false\"], 
[\"id:1\",\"title:pick up dry cleaning\",\"done:false\"], 
[\"id:2\",\"title:walk dog\",\"done:false\"]]

我应该注意的一件事是，当我更改以下内容时，不会发生页面刷新问题： itemsArray.push（[id，title，done]）; 到以下内容： itemsArray.push（input.value）;

Answer 1

出现此问题的主要原因是因为您的JSON格式不正确。
您仅在页面刷新上看到问题的原因是因为这时本地存储包含带有不正确格式的JSON的“ todolist”键。然后，此JSON值存储在data变量中，并以不希望的方式（如您所述）输出到列表项。

否则（无需刷新页面）列表项的文本直接来自输入字段中的文本。

如果您对代码进行以下更改，它将正常运行（我已经测试过）。希望对您有所帮助。

JavaScript注释

首先，我不确定这是否在您将代码发布到此处时发生，但是如果您在JS中的注释跨越两行或更多行，那么您需要在所有行上加上//。

例如，在您的代码中，您拥有：

//function that creates an li element, sets the text of the element to the 
parameter, and appends the list item to the ul.

它应该是：

//function that creates an li element, sets the text of the element to the 
//parameter, and appends the list item to the ul.

JSON格式

第二，我看到JSON格式的问题。看起来应该类似于以下内容（在添加斜杠之前）。

[{"id":0,"title":"buy groceries","done":false}, 
{"id":1,"title":"pick up dry cleaning","done":false}, 
{"id":2,"title":"walk dog","done":false}]

请注意，每个属性名称（即"id"，"title"和"done"）都应加双引号，并且每个属性值（例如"buy groceries"）都应加双引号（除非其int或boolean等）。您可以使用名为JSLint的工具来检查JSON是否有效。

因此，为了以正确的格式（提交表单时）创建JSON

更改以下代码行：

var id = "id:" + itemsArray.length;
var title = "title:" + input.value;
var done = "done:" + "false";
itemsArray.push([id, title, done]);

到以下：

var idValue = itemsArray.length;
var titleValue = input.value;
var doneValue = false;
itemsArray.push({"id": idValue, "title": titleValue, "done" : doneValue});

遍历数组

您的data变量将包含待办事项对象数组（来自本地存储）。

因此，以下代码中的item将包含完整的对象，即{"id":0,"title":"buy groceries","done":false}。

因此，为了在此处获得标题，您需要说item.title。（这将在JSON正确格式化后开始工作）：

  data.forEach(item => {
    //log the item to check it.
    console.log(item);
    liMaker(item.title);
  });

页面刷新显示整个本地存储对象

1 个答案:

JavaScript注释

JSON格式

遍历数组