如何在JavaScript中无需按钮将localStorage数据填充至文本框并显示？

当然可以，完全不需要依赖按钮就能实现localStorage的读取和即时显示效果，主要通过两个关键操作实现：

1. 页面加载时自动读取localStorage并显示 #

页面打开后立即检查localStorage中是否已有存储的名称，若有则直接更新页面标题内容，不用等待用户操作。

2. 输入框内容实时同步到localStorage并更新显示 #

给输入框绑定input事件，只要用户在输入框中输入内容，就自动将内容保存到localStorage，同时实时更新页面的问候文本。

修改后的完整代码 #

HTML部分

<div class="container">
    <h1 id="h1">Hello unknown ! </h1>

    <label>Name: </label>
    <input type="text" id="myName">
</div>

JavaScript部分

// 获取DOM元素
const h1 = document.getElementById('h1');
const myNameInput = document.getElementById('myName');

// 页面加载时初始化读取localStorage
window.addEventListener('DOMContentLoaded', () => {
    const savedName = localStorage.getItem('myName');
    if (savedName) {
        h1.textContent = `Hello ${savedName}`;
        // 同时把保存的名称填充到输入框
        myNameInput.value = savedName;
    }
});

// 输入框内容变化时实时保存并更新显示
myNameInput.addEventListener('input', () => {
    const inputValue = myNameInput.value.trim();
    if (inputValue) {
        localStorage.setItem('myName', inputValue);
        h1.textContent = `Hello ${inputValue}`;
    } else {
        // 如果输入为空，还原默认文本并清除localStorage
        h1.textContent = 'Hello unknown ! ';
        localStorage.removeItem('myName');
    }
});

代码说明 #

• DOMContentLoaded事件确保DOM加载完成后再执行读取操作，避免找不到元素的问题。
• input事件会在输入框内容每一次变化时触发（包括键盘输入、粘贴等），实现真正的即时同步。
• 增加了输入为空时的处理，还原默认问候语并清除localStorage中的对应项，逻辑更完整。

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