我们使用带有打字稿的普通 vite 项目来理解打字稿，并使用本地存储来存储待办事项。
vite + ts my todo list
<!---->my today todo
.container{ max-width: 700px; margin-inline: auto; display: flex; align-items: center; justify-content: center; flex-direction: column;}form #inputtodo{ padding: 8px 15px;}form #btnsubmit{ padding: 8px 15px;}.todos-container{ padding: 10px; width: 100%; width: fit-content;}.todo-item{ padding: 5px; border: 1px solid gray; gap: 20px; width: 100%; display: flex; align-items: center;}.textcut{ text-decoration: line-through;}
interface Todo{ content: string, isComplete: boolean, readonly id:string}let todos:Todo[] = [];const todosContainer = document.querySelector('.todos-container')!;function genrateTodo(id: string, content:string, isComplete:boolean){ const itemContainer:HTMLDivElement = document.createElement('div'); itemContainer.classList.add('todo-item'); // checkbox const checkbox: HTMLInputElement = document.createElement('input'); checkbox.type = "checkbox"; checkbox.checked = isComplete checkbox.onchange = () => { todos.find(todo => { if(todo.id === id) todo.isComplete = checkbox.checked; // save updated todo localStorage.setItem('todos', JSON.stringify(todos)); }) todoText.className = checkbox.checked ? 'textCut' : ''; } // paragraph content const todoText:HTMLParagraphElement = document.createElement('p'); todoText.innerHTML = content; todoText.className = isComplete ? 'textCut' : ''; // delete button const btnDelete: HTMLButtonElement = document.createElement('button'); btnDelete.textContent = 'X'; btnDelete.onclick = () => { todos = todos.filter(todo => todo.id !== id); localStorage.setItem('todos', JSON.stringify(todos)); renderTodos(todos); } itemContainer.append(checkbox, todoText, btnDelete); todosContainer.appendChild(itemContainer);}// add todoconst form = document.getElementById('myForm')!;form.onsubmit = (e: SubmitEvent) => { e.preventDefault(); const inputElement = document.getElementById('inputTodo') as HTMLInputElement; let value:string = inputElement.value; const newTodo:Todo = { id: String(Math.random() * 1000), content: value, isComplete: false } todos.push(newTodo); inputElement.value = ""; localStorage.setItem('todos', JSON.stringify(todos)); renderTodos(todos);}function renderTodos(todos: Todo[]){ todosContainer.innerHTML = ""; todos.forEach(todo => { genrateTodo(todo.id, todo.content, todo.isComplete); })}const jsonTodos = localStorage.getItem('todos')!;const storedTodos : Todo[] = JSON.parse(jsonTodos);todos = storedTodos;renderTodos(todos);
以上就是我在 Typescript 中创建了一个 Todo 应用程序，并将 Todos 保存在本地存储中的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629464.html
微信扫一扫 
支付宝扫一扫 
