用localstorage做记事本的代码

localStorage是HTML5提供的一种用于在客户端保存数据的技术。以下是用localStorage实现记事本功能的代码示例：

HTML：

<input type="text" id="inputField" placeholder="输入代办事项">
<button id="addButton">添加</button>
<ul id="todoList"></ul>

JavaScript：

// 获取元素
var inputField = document.getElementById("inputField");
var addButton = document.getElementById("addButton");
var todoList = document.getElementById("todoList");

// 从localStorage中获取代办事项列表
var todos = JSON.parse(localStorage.getItem("todos")) || [];

// 渲染代办事项列表
function renderTodos() {
  todoList.innerHTML = "";
  todos.forEach(function(todo, index) {
    var li = document.createElement("li");
    li.innerHTML = `
      <input type="checkbox" onchange="toggleTodo(${index})" ${todo.completed ? "checked" : ""}>
      <span>${todo.text}</span>
      <button onclick="deleteTodo(${index})">删除</button>
    `;
    todoList.appendChild(li);
  });
}

// 添加代办事项
function addTodo() {
  var text = inputField.value.trim();
  if (text) {
    var todo = {
      text: text,
      completed: false
    };
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
    renderTodos();
    inputField.value = "";
  }
}

// 切换代办事项的完成状态
function toggleTodo(index) {
  todos[index].completed = !todos[index].completed;
  localStorage.setItem("todos", JSON.stringify(todos));
  renderTodos();
}

// 删除代办事项
function deleteTodo(index) {
  todos.splice(index, 1);
  localStorage.setItem("todos", JSON.stringify(todos));
  renderTodos();
}

// 添加按钮点击事件
addButton.addEventListener("click", addTodo);

// 页面加载时渲染代办事项列表
renderTodos();

以上代码实现了一个简单的记事本功能，可以添加、删除和切换代办事项的完成状态，并将数据存储在localStorage中。