尝试从本地存储中提取保存的输入

Question

我在将输入文本保存到本地存储并使用 JS 检索它时遇到问题。这是一个调度程序应用程序，我有多个按小时组织的输入框，用户应该能够将他们的计划输入到文本框中并保存，并且应该在页面重新加载时检索它。 这是我的 JS：

// Add input to local storage-------------------------------------------------------//

const button = document.querySelector('.saveBtn');
const hours = ['9', '10' , '11', '12' , '13', '14', '15', '16', '17'];


function savePlan() {
    for (let i = 0; i < hours.length; i++) {
        // TEST: console.log(hours[i]);
        let input11 = document.getElementById('red').value;
        console.log(input11);
    };
    localStorage.setItem('plan', hours[i].value);
    // console.log(plan);
    
};

button.addEventListener('click', savePlan());

// Retrieves plan from local Storage-----------------------------------------------//
function getPlan() {
    return localStorage.getItem('plan');
};

getPlan();

这是我的 HTML 的一部分：（在 0900-1700 小时内我有多个这样的盒子）

 <tr class="row" id="11">
            <th scope="time" id="hour11"class="time">11:00</th>
            <td><input type="text" class="textbox" id="h11input"></td>
            <td class="btnContainer">
              <button class="saveBtn"><i class="fas fa-save"></i></button>
            </td>
          </tr>
          <tr class="row" id="12">
            <th scope="time" id="hour12" class="time">12:00</th>
            <td><input type="text" class="textbox" id="h12input"></td>
            <td class="btnContainer">
              <button class="saveBtn"><i class="fas fa-save"></i></button>
            </td>
          </tr>

任何帮助表示赞赏。谢谢！

Answer 1

当您的代码要求将对象 hours[i].value 存储到本地存储键“计划”中时，它会因两个原因而失败：

1. “i”变量的作用域是它上面的 for 循环；循环结束，“i”将未定义。

localStorage.setItem('plan', hours[i]); // will write 'undefined' to local storage

1. “小时”数组是一个字符串数组。字符串上没有“值”属性；要确认这一点，您可以尝试在 Chrome 开发工具中输入“Hello, world!”.value。您可以将“未定义”存储到本地存储中，但您不能将未定义值 (hours[i]) 上未定义的“值”属性 (.value) 的访问权限传递给 localStorage.setItem() - 这将抛出类型错误。

localStorage.setItem('plan', hours[i].value); // will throw a TypeError because it can't read a 'value' property of undefined

我不太清楚你在这里要做什么，但一些可能更接近标记的人为代码可能看起来像this。