如何在HTML/JS中将文本框与localStorage关联？

你当前代码直接将DOM元素docbox存入了localStorage，所以控制台查看时显示的是元素对象。要存储文本框的输入内容，需要获取元素的value属性值，具体修改如下：

核心修改点 #

• 不要直接传递元素本身，而是获取元素的value属性（这才是用户输入的文本）
• 推荐通过document.getElementById显式获取元素，避免依赖全局变量的隐式绑定
• 页面加载时可以将存储的内容回填到文本框，提升用户体验

修改后的完整代码 #

<center> 
    <textarea style="background-color:#34373c; color:white; border:0px solid #34373c;" id="docbox" name="docbox" rows="100" cols="100"></textarea>
</center>
<script>
    // 获取文本框元素
    const docbox = document.getElementById('docbox');

    // 页面加载时，将localStorage中的内容回填到文本框
    const savedContent = localStorage.getItem('docboxContent');
    if (savedContent) {
        docbox.value = savedContent;
    }

    // 监听文本框输入事件，实时保存内容到localStorage
    docbox.addEventListener('input', () => {
        localStorage.setItem('docboxContent', docbox.value);
    });
</script>

代码说明 #

• docbox.value：获取文本框内用户输入的实际内容
• input事件：文本框内容变化时自动触发，实现实时保存
• 页面加载时的回填逻辑：确保用户刷新页面后，之前输入的内容不会丢失

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