Не удается получить динамически созданный контент из localStorage

Question

У меня есть таблица HTML с идентификатором «roster1», которая позволяет пользователям добавлять строки таблицы с помощью нажатия кнопки, и я пытаюсь сохранить состояние таблицы с помощью кнопки «Сохранить», запускает следующий фрагмент кода:

function saveRoster() { 
     localStorage.setItem('rosterPd1',''); 
     var roster = document.getElementById ('roster1'); 
     localStorage.setItem('rosterPd1', roster); 
     } 

Если я ввод некоторого статическое значения в «rosterPd1», то я могу использовать информацию, записанную в LocalStorage без проблем. Однако, когда я пытаюсь сохранить таблицу, используя приведенный выше код, я получаю [объект HTMLTableElement] возвращен ..., который является ПРАВИЛЬНЫМ, но не особенно полезным!

Может ли кто-нибудь указать мне в правильном направлении на то, что мне нужно сделать, чтобы локальная хранилища сохранила содержимое самой таблицы?

Answer 1

Вы можете сохранить только Строки в хранения, но мне кажется, что вы пытаетесь сделать, innerHTML будет достаточно;

function saveRoster() { 
    var roster = document.getElementById('roster1'); 
    if (!roster) return; // not found 
    localStorage.setItem('rosterPd1', roster.innerHTML); // store innerHTML 
} 
function loadRoster() { 
    var roster = document.getElementById('roster1'); 
    if (!roster) return; // not found 
    roster.innerHTML = localStorage.getItem('rosterPd1'); // get+apply innerHTML 
} 

А почему вы получаете [object HTMLTableElement], это то, что происходит, когда вы звоните toString на JavaScript ссылкой на <table>.

document.createElement('table').toString() // "[object HTMLTableElement]"