正文 

当前位置： 首页 > 源码 >

使用 localStorage 的待办事项列表

     2023-03-16     104

关键词：

【中文标题】使用 localStorage 的待办事项列表【英文标题】：To-Do List with localStorage 【发布时间】：2019-06-02 13:23:53 【问题描述】：

我做了一个简单的待办事项清单。但我想让一个列表元素有一个 text-decoration = line-through

当我单击按钮时，列表项将设置为直通样式，即使我刷新页面或在新请求中返回它，它仍将保持直通（我认为需要本地存储） .

我以为我可以使用 javascript 添加一个类，但我找不到如何使用本地存储来做到这一点。

以下是我尝试过的：

HTML：

<ul id="a2">
   <li>Make a ramen</li>
</ul>
<button type="button" id="ka" onclick="laylay()" class="" name="button">A</button>

CSS：

.done 
  text-decoration: line-through;

JS：

function laylay() 
var as = document.getElementById("a2");
  as.classList.add("done");

【问题讨论】：

你试过什么？我们需要更多详细信息，例如您当前失败的代码。 @basic 我试过什么 【参考方案1】：

如果您想跨会话或请求存储列表的状态并且您没有列表的后端存储（这意味着它全部存储在客户端上，也就是通过浏览器），您将需要使用local storage。

试试这个。

localStorage.setItem('a2', 'done');

然后在页面加载时从本地存储中获取项目并设置所需的类。 localStorage.getItem('a2');

您需要有一个event that fires as soon as the document is ready，它将查看您的本地存储，看看它是否找到了所需的记录，如果找到了，它会更新 CSS 样式。 

window.onload(function() 
 var itemStyle = localStorage.getItem('a2');
 var as = document.getElementById("a2");
 as.classList.add(itemStyle);

这不是一个非常可扩展的解决方案，但对于您的学习和简单示例来说，它会起作用。

【讨论】：

已经完成了，但是当我刷新所有更改时它都不是永久性的codepen.io/anon/pen/aPKdjw 那是因为您缺少 onload 处理程序。 codepen.io/anon/pen/bOKpWE 这是有道理的，但现在元素总是被覆盖。我不需要按下按钮。当页面加载时，它已经被覆盖了。我需要通过按钮覆盖它，更改将保存到本地存储 正确，它总是被上划线，因为这是当前存储在 localStorage 中的状态。如果要切换状态，则需要在按钮操作中添加更多代码以撤消上划线（如果这是当前所处的状态）。根据您的问题，您只需询问如何存储已完成的状态（也称为上划线）。这就是它的作用。这不是收集待办事项列表的完整解决方案，将列表及其状态长期存储在本地存储中，并让按钮句柄将它们标记为已完成或未完成。您从存储中删除状态或更新代码手柄切换。 @Kaaleyah 我希望这会有所帮助。由于您是新来的，因此如果人们回答了问题，他们会尝试将答案标记为已接受。【参考方案2】：

尝试获取元素的 HTML，document.querySelector("#a2").innerHTML;，并将其作为字符串保存在 localStorage 中。而当你需要再次加载时，尝试检查它是否存在于localStorage中，然后字符串将被设置为#a2的innerHTML

【讨论】：

我尝试了类似的方法，但仍然没有结果codepen.io/anon/pen/aPKdjw【参考方案3】：

你应该有一个对象数组存储在 localstorage 中，看起来像这样：

[
todo:'Do something', complete:false,
todo:'Do something', complete:false,
]

然后，当您将待办事项渲染到页面时，您会根据对象设置条件，您的待办事项应该具有什么样式。 例如。

let todos=localStorage.getItem('todos');
todos.map(item=>
if(item.complete)
 //code to add this item to page and put .style.textDecoration='line-trough'

else
//code to put item to page

)

为了存储这种对象，您需要在设置它时对其进行字符串化，而不是在使用它时对其进行解析。您可以用谷歌搜索它是如何做到的。 如果您正在使用某些框架，那么在页面上以您想要的方式呈现它会更容易，但是可以使用 js 来完成，只是代码更长。 例如。

//Way to get items from localStorage
let todos=JSON.parse(localStorage.getItem("todos") || "[]");
//Way to set item
localStorage.setItem("todos",JSON.stringify(todos));

【讨论】：

这里是链接，您可以在其中查看如何使用 javascript 将项目添加到 ul：***.com/questions/20673959/… 这是我刚刚制作的待办事项，您可以看到：codepen.io/Skrbic/pen/YdvqrM

NSDocument 用于关系数据/待办事项列表？

...也与其他实体有关系。我为此创建了一个iOS应用程序，它使用核心数据数据模型.... 查看详情

如何使用 JsPdf 下载完整的待办事项 (vue.js) 列表？

】如何使用JsPdf下载完整的待办事项(vue.js)列表？【英文标题】：Howtodownloadthefullto-do(vue.js)listusingJsPdf?【发布时间】：2022-01-2121:25:54【问题描述】：我是这个领域的初学者。尝试使用vue.js做一个小项目。我想为用户提供一个选项... 查看详情

尝试使用 coredata 保存待办事项列表不保存

】尝试使用coredata保存待办事项列表不保存【英文标题】：Attemptingtosavetodolistusingcoredatadoesntsave【发布时间】：2019-06-1819:32:22【问题描述】：我已经设置了一个tableview控制器，并将它用于带有coredata的重量跟踪列表，以保存所有的... 查看详情

使用 Javascript 中的按钮存储和获取动态创建的列表元素 - 使用 LocalStorage

...用Javascript中的按钮存储和获取动态创建的列表元素-使用LocalStorage【英文标题】：StoringandGettingDynamicallyCreatedListElementswithButtonsinJavascript-usingLocalStorage【发布时间】：2019-03-1911:12:09【问题描述】：我正在制作一个待办事项列表应用... 查看详情

AngularJS待办事项列表应用程序-在页面刷新时保持列表[重复]

...icate]【发布时间】：2019-01-1215:21:05【问题描述】：我正在使用AngularJS制作一个简单的待办事项列表应用程序。我实际上使用的是ASP.NETMVC模板，但到目前为止，我已经设法通过使用Angular和Bootstrap来让一切正常 查看详情

使用 jQuery 将新列表项添加到待办事项列表？

】使用jQuery将新列表项添加到待办事项列表？【英文标题】：AddinganewlistitemtoatodolistusingjQuery?【发布时间】：2021-06-2504:45:27【问题描述】：我是编码新手。我试图将输入值添加到givenToDos数组，将其附加到#to-do-listdiv，然后还将一... 查看详情

在待办事项列表中隐藏/显示不同的内容并使用 JavaScript 一次显示一个内容 [关闭]

】在待办事项列表中隐藏/显示不同的内容并使用JavaScript一次显示一个内容[关闭]【英文标题】：hide/showdifferentcontentintodolistandshowonecontentatatimeusingJavaScript[closed]【发布时间】：2021-11-2016:23:59【问题描述】：我正在使用laravel框架构... 查看详情

无法在初始渲染中显示待办事项列表

...【发布时间】：2021-08-0708:32:06【问题描述】：我正在尝试使用react、redux、redux-form和firestore数据库构建todoList，我还可以使用操作或操作创建器将待办事项插入数据库中，我可以获取数据库中的数据存储但是当用户第一次访问网... 查看详情

如何让 splice() 方法在我的待办事项列表中工作？

...问题描述】：我正在构建一个简单的待办事项列表，并将使用拼接方法从列表中删除项目。我无法让它工作。我将拼接的项目带到控制台，因此我的删除按钮和我的删除功能之间的“连接”似乎有效。我也尝试了slice方法并且有... 查看详情

JavaScript/HTML 中的待办事项列表

】JavaScript/HTML中的待办事项列表【英文标题】：ToDoListinJavaScript/HTML【发布时间】：2014-12-2319:54:49【问题描述】：我已经设置了这个待办事项列表，几乎所有的工作都很完美。但是，如果我删除列表中的所有内容。它不会让我添... 查看详情

我在这个 React 应用程序中的待办事项列表没有出现

...它只返回&lt;ul&gt;的&lt;li&gt;元素。我是否正确使用useState()？我必须先使用Array.from()，然后才能让地图功能在taskList上工作。在此之前，我 查看详情

Drupal 视图和待办事项列表

】Drupal视图和待办事项列表【英文标题】：Drupalviews&todolist【发布时间】：2010-10-3108:35:45【问题描述】：想知道是否有人可以告诉我在视图中是否可以进行以下操作。我已经安装了待办事项模块-http://drupal.org/project/to_do然后我... 查看详情

react+redux实现简单的待办事项列表todolist(代码片段)

...og.csdn.net/q1056843325/article/details/54809630转载请添加该地址】使用Redux做了一个简单的ToDoList待办事项列表这个例子也是源于Redux作者DanAbramov的视频demo还要特别说明一下我还没有使用react-redux库进行解耦（可能以后加）也没有... 查看详情

如何从 laravel 的列表中删除待办事项列表项？

】如何从laravel的列表中删除待办事项列表项？【英文标题】：HowcanIdeleteatodolistitemfromthelistinlaravel?【发布时间】：2019-10-3105:11:56【问题描述】：我正在尝试删除laravel中的一个项目。这是我的代码：这是我的路线：Route::resource(\'\'... 查看详情

css简单的html待办事项列表(代码片段)

查看详情

ios - 如何在 iPad 中创建待办事项列表 [关闭]

...来编写/查看我的to-do列表和与联系人的约会。有谁知道要使用哪个库以及如何在ipad中实现它感谢您的帮助，【问题讨论】：你的问题很宽泛，听起来更像是需求而不是编程问题。【参考方案1】：您可能正在查看适用于iOS的Ev 查看详情

无法读取未定义的属性（读取“地图”）待办事项列表

】无法读取未定义的属性（读取“地图”）待办事项列表【英文标题】：Cannotreadpropertiesofundefined(reading\'map\')TodoList【发布时间】：2022-01-2321:34:58【问题描述】：useEffect(()=>//GetValuefromDbconsttodo=collection(db,\'Todos\');consttodoSnapshot=get... 查看详情

如何使用javascript制作待办事项列表(代码片段)

...直接跳到末尾去评论区领书在本文中，您将学习如何使用JavaScript创建待办事项列表。TodoListJavaScript 查看详情