如何通过LocalStorage保存HTML输入框值并修改页面标题？

没问题，我来帮你搞定这个需求！下面是完整的实现方案，包含HTML的完善和JavaScript的逻辑代码：

1. 完善后的HTML代码 #

首先我们给按钮添加一个id，方便JavaScript精准获取元素，同时补全基础结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>初始标题</title>
</head>
<body>
  <p>Hello</p>
  <div class="form-group">
    <label for="text">Change title:</label>
    <input type="text" class="form-control inputBox" id="text" name="text">
  </div>
  <button id="submitBtn">Submit</button>

  <!-- 这里放我们的JavaScript代码 -->
  <script>
    // JS逻辑写在这里
  </script>
</body>
</html>

2. JavaScript功能实现 #

把以下代码放到上面的<script>标签里，就能完成修改标题+本地存储的功能：

// 获取页面上的输入框和按钮元素
const inputBox = document.getElementById('text');
const submitBtn = document.getElementById('submitBtn');

// 页面加载时，自动读取本地存储的标题并恢复
window.addEventListener('load', () => {
  const savedTitle = localStorage.getItem('pageTitle');
  if (savedTitle) {
    document.title = savedTitle;
    inputBox.value = savedTitle; // 可选：把之前保存的内容显示在输入框里
  }
});

// 点击提交按钮时的处理逻辑
submitBtn.addEventListener('click', () => {
  const newTitle = inputBox.value.trim();
  
  // 简单校验：确保输入内容不为空
  if (newTitle) {
    // 修改页面标题
    document.title = newTitle;
    // 将标题保存到localStorage（键名为pageTitle）
    localStorage.setItem('pageTitle', newTitle);
    // 可选：给用户一个操作成功的反馈
    alert('标题已更新并保存！');
  } else {
    alert('请输入有效的标题内容哦！');
  }
});

关键功能说明 #

• 本地存储持久化：用localStorage.setItem()保存标题，即使刷新页面或关闭浏览器，再次打开时标题会自动恢复（通过window.load事件读取localStorage.getItem()的值）。
• 输入校验：通过trim()去掉输入内容的首尾空格，避免空标题或纯空格的无效输入。
• 用户反馈：添加了简单的alert提示，让用户清楚知道操作结果，你也可以换成更友好的页面内提示（比如显示一个成功消息）。

内容的提问来源于stack exchange，提问作者akin