在JS待办事项列表中使用本地存储,可以通过以下步骤实现:
以下是一个示例代码:
// 存储待办事项数据
function saveTodoList(todoList) {
localStorage.setItem('todoList', JSON.stringify(todoList));
}
// 获取待办事项数据
function getTodoList() {
const todoList = localStorage.getItem('todoList');
return todoList ? JSON.parse(todoList) : [];
}
// 添加待办事项
function addTodoItem(todoItem) {
const todoList = getTodoList();
todoList.push(todoItem);
saveTodoList(todoList);
}
// 编辑待办事项
function editTodoItem(index, updatedItem) {
const todoList = getTodoList();
todoList[index] = updatedItem;
saveTodoList(todoList);
}
// 删除待办事项
function deleteTodoItem(index) {
const todoList = getTodoList();
todoList.splice(index, 1);
saveTodoList(todoList);
}
// 渲染待办事项列表
function renderTodoList() {
const todoList = getTodoList();
const todoListElement = document.getElementById('todo-list');
todoListElement.innerHTML = '';
todoList.forEach((item, index) => {
const listItem = document.createElement('li');
listItem.textContent = item;
todoListElement.appendChild(listItem);
});
}
// 页面加载时渲染待办事项列表
window.addEventListener('load', renderTodoList);
这是一个简单的示例,通过使用localStorage来存储和获取待办事项数据,并使用DOM操作方法将待办事项列表渲染到页面上。你可以根据实际需求进行扩展和优化。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云