如何使用JavaScript来实现修改并保存数据的功能

// 进入编辑模式
function enterEditMode(element) {
  const originalValue = element.innerText;
  const inputElement = document.createElement("input");
  inputElement.value = originalValue;

  // 替换文本为输入框
  element.innerHTML = "";
  element.appendChild(inputElement);

  // 设置输入框自动获得焦点
  inputElement.focus();

  // 在输入框失去焦点时保存修改
  inputElement.addEventListener("blur", () => {
    exitEditMode(element, originalValue, inputElement.value);
  });
}

// 保存修改
function exitEditMode(element, originalValue, newValue) {
  // 如果数据没有发生改变，则直接退出编辑模式
  if (originalValue === newValue) {
    element.innerHTML = newValue;
    return;
  }

  // 在这里执行保存操作，例如将数据发送到服务器或保存到本地存储

  // 保存成功后更新元素内容
  element.innerHTML = newValue;
}

// 获取编辑按钮和保存按钮的元素
const editButton = document.querySelector(".edit-button");
const saveButton = document.querySelector(".save-button");

// 为编辑按钮添加事件处理
editButton.addEventListener("click", () => {
  enterEditMode(document.querySelector(".data-item"));
});

// 为保存按钮添加事件处理
saveButton.addEventListener("click", () => {
  exitEditMode(document.querySelector(".data-item"));
});