页面刷新后输入内容消失但localStorage已保存的问题求助

我开发了一个工作日日程应用，当前遇到的问题是：在文本框输入内容并点击保存后，刷新页面时，输入的内容无法从localStorage中恢复到页面上。

现有代码示例 #

HTML

<div class="row time-block" id="1">
   <div class="col-md-1 hour" id="1">9am</div>
   <textarea class="col-md-10 description" id="inputValue"></textarea>
   <button class="saveBtn col-md-1"><i class="fa fa-save"></i></button>
</div>

JavaScript

$('.saveBtn').on('click', function() {
    var inputValue = $(this).siblings('.description').val();

    localStorage.setItem("inputValue", inputValue);
});

$('inputValue .description').val(localStorage.getItem('inputValue'));

问题分析及修复方案 #

核心问题点

1. 存储key无唯一性：使用固定的inputValue作为localStorage的key，多时间块场景下新数据会覆盖旧数据，且无法对应到正确的文本框。
2. DOM选择器错误：$('inputValue .description')是无效选择器，无法定位到目标文本框。
3. 数据恢复时机错误：恢复数据的代码未在DOM加载完成后执行，可能导致元素未渲染就进行赋值操作。

修正后的代码 #

JavaScript

// 页面DOM加载完成后执行数据恢复
$(document).ready(function() {
    // 遍历所有时间块，恢复对应存储的数据
    $('.time-block').each(function() {
        const blockId = $(this).attr('id');
        const savedContent = localStorage.getItem(`schedule_${blockId}`);
        if (savedContent) {
            $(this).find('.description').val(savedContent);
        }
    });

    // 绑定保存按钮点击事件
    $('.saveBtn').on('click', function() {
        const parentBlock = $(this).closest('.time-block');
        const blockId = parentBlock.attr('id');
        const inputContent = parentBlock.find('.description').val();
        
        localStorage.setItem(`schedule_${blockId}`, inputContent);
    });
});

优化后的HTML（去除重复id，避免DOM冲突）

<div class="row time-block" id="9am">
   <div class="col-md-1 hour">9am</div>
   <textarea class="col-md-10 description"></textarea>
   <button class="saveBtn col-md-1"><i class="fa fa-save"></i></button>
</div>

修复说明 #

1. 唯一key存储：用时间块的唯一id拼接成localStorage的key（如schedule_9am），确保每个时间块的数据独立存储，不会互相覆盖。
2. 精准DOM操作：通过closest和find方法定位当前时间块及对应文本框，避免选择器错误。
3. 正确执行时机：将数据恢复逻辑放在$(document).ready()中，确保页面元素完全渲染后再进行赋值。

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