jQuery 实现输入框内容保存、修改和提示功能

使用 jQuery 实现输入框内容保存、修改和提示功能

本文将使用 jQuery 实现一个输入框，它可以将用户输入的内容保存到本地，并在刷新页面后仍然保留。同时，用户可以修改内容，点击保存按钮后，会弹出提示框提醒用户保存成功。

代码实现

$(document).ready(function() {
  var inputVal = localStorage.getItem('openaikey');
  if(inputVal) {
    $('#edit_openaikey').val(inputVal);
  }
  
  $('#edit_openaikey').on('change', function() {
    localStorage.setItem('openaikey', $(this).val());
  });
  
  $('#saveBtn').on('click', function() {
    alert('保存成功！');
  });
  
  $('#editBtn').on('click', function() {
    $('#edit_openaikey').prop('disabled', false);
  });
});

代码解释

localStorage: 用于将输入框中的值保存在本地。
- getItem('openaikey')：获取之前保存的 openaikey 的值。
- setItem('openaikey', $(this).val())：保存新的 openaikey 值。
change 事件: 监听输入框内容的变化，每次变化都会将新的值保存在本地。
#saveBtn: 保存按钮，点击后会弹出提示框。
#editBtn: 解除禁用按钮，点击后可以对输入框内容进行修改。

功能说明

页面加载时，检查本地存储中是否有之前保存的值，如果有，则将值填充到输入框中。
用户输入内容后，change 事件会将新的内容保存到本地。
点击 saveBtn 按钮，会弹出提示框提醒用户保存成功。
点击 editBtn 按钮，可以解除输入框的禁用状态，允许用户修改内容。

注意事项

如果用户清空了输入框中的内容，localStorage 中的值也会被清空。
本代码只是演示了基本的保存、修改和提示功能，可以根据实际需要进行扩展。