localStorage хранит HTMLTextAreaElement вместо значения

Question

У меня есть страница с 33 текстовыми областями, если пользователь заполняет любую из них, я хочу сохранить их, но также оставить пустые места в списке / массиве localStorage, то есть, если вы используете запись 0 и только запись 3331 из них посередине будет пустым, потому что их положение имеет значение.Я добился определенного прогресса, и лучшее, что я получил, был этот скрипт:

var cells = 33;

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

Функция savePlanner вызывается для onclick тега кнопки в файле HTML.

<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 может хранить только строку, метод getString для HTMLTextAreaElement будет возвращать HTMLTextAreaElement.

Требуется

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

, что является значениемтекстовой области, а не элемента DOM.