jQuery新手疑问：如何存储输入文本并替换HTML指定内容？

你的代码存在的问题 #

• 事件绑定目标错误：#name是文本输入框，它不会触发submit事件，submit事件属于表单元素，你应该监听提交按钮的click事件，或者把输入框和提交按钮包裹在<form>标签内监听表单的submit事件。
• 缺少存储逻辑：没有实现输入文本的持久化存储功能。
• 未处理页面初始化时的内容恢复：页面刷新后不会保留之前输入的内容。

正确实现方案 #

方案1：监听提交按钮的click事件（无需form标签） #

保留你原有的HTML结构：

<section>
    <label for="name">Name</label>
    <input type="text" id="name">
    <input type="submit" id="submit">
    <p class="output">Hello <strong>Text that needs to be replaced</strong></p>
</section>

对应的jQuery代码：

$(function () {
    // 页面加载时，读取本地存储的值并更新页面
    const savedName = localStorage.getItem('userName');
    if (savedName) {
        $('#name').val(savedName);
        $('strong').text(savedName);
    }

    // 监听提交按钮的点击事件
    $('#submit').on('click', function() {
        const value = $('#name').val().trim();
        if (value) {
            // 替换指定位置的文本
            $('strong').text(value);
            // 将文本存储到浏览器本地
            localStorage.setItem('userName', value);
        }
    });
});

方案2：使用表单的submit事件（更规范） #

如果想用表单包裹元素，需要阻止表单默认的跳转行为：

<section>
    <form id="nameForm">
        <label for="name">Name</label>
        <input type="text" id="name">
        <input type="submit" id="submit">
    </form>
    <p class="output">Hello <strong>Text that needs to be replaced</strong></p>
</section>

对应的jQuery代码：

$(function () {
    // 页面加载时恢复存储的内容
    const savedName = localStorage.getItem('userName');
    if (savedName) {
        $('#name').val(savedName);
        $('strong').text(savedName);
    }

    // 监听表单的submit事件
    $('#nameForm').on('submit', function(e) {
        // 阻止表单默认的提交跳转行为
        e.preventDefault();
        const value = $('#name').val().trim();
        if (value) {
            $('strong').text(value);
            localStorage.setItem('userName', value);
        }
    });
});

关键说明 #

• 存储方式：这里用localStorage实现本地持久化存储，数据会一直保留在浏览器中，除非主动清除；如果需要临时存储（关闭页面即失效），可以改用sessionStorage。
• 输入验证：添加了.trim()去除首尾空格，并且判断值非空才执行替换和存储，避免空值替换。
• 事件逻辑：确保事件绑定在正确的元素上，按钮用click事件，表单用submit事件时必须阻止默认行为。

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