javascript - localStorage 存储 HTMLTextAreaElement 而不是值

Question

我有一个包含 33 个文本区域的页面，如果用户填充其中任何一个，我想存储它们，但也要在 localStorage 的列表/数组中保留空白，这意味着，如果您仅使用条目 0 和条目 33 ，中间的 31 个将是空的，因为他们的位置很重要。我取得了一些进展，我取得的最好成绩是这个脚本:

var cells = 33;

function savePlanner() {
    for (i = 0; i < cells; i++) {
        localStorage.setItem('planner', document.getElementsByTagName('textarea')[i]);
    }
}

在 HTML 文件中按钮标记的 onclick 上调用 savePlanner 函数。

<div class="content-output"><textarea></textarea></div>
        <table class="u-full-width">
        <thead>
            <tr>
                <th>Hour</th>
                <th>Activity</th>
                <th>Note</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><textarea id="hour" class="user-input"></textarea></td>
                <td><textarea class="user-input"></textarea></td>
                <td><textarea class="user-input"></textarea></td>
            </tr>
            <tr>
                <td><textarea id="hour" class="user-input"></textarea></td>
                <td><textarea class="user-input"></textarea></td>
                <td><textarea class="user-input"></textarea></td>
            </tr>
            <tr>
                <td><textarea id="hour" class="user-input"></textarea></td>
                <td><textarea class="user-input"></textarea></td>
                <td><textarea class="user-input"></textarea></td>
            </tr>

这些 textarea 重复了 11 次，由于它们有 3 列，所以我有 33 个条目。

但是如果我使用 document.getElementsByTagName('textarea')[i]，我存储的内容是 HTMLTextAreaElement，并且如果我连接 value 到它，它不存储任何内容，即使我的一些 textareas 已被填充。我在这里缺少什么？

Answer 1

localStorage.setItem('planner', document.getElementsByTagName('textarea')[i]);

将 HTMLTextAreaElement 粘贴到存储中，而 localStorge 只能存储字符串，HTMLTextAreaElement 上的 getString 方法将返回 HTMLTextAreaElement。

你想要

document.getElementsByTagName('textarea')[i].value

这是文本区域的值，而不是 DOM 元素。