Почему мои localStorage.setItem () и localStorage.getItem () не хранят значения?

Question

Я хочу сохранить введенное пользователем значение с помощью localStorage, а затем использовать это значение в моем таймере обратного отсчета.

Вот HTML, где пользователь вводит свои данные:

<form action='/' method= 'GET' id='settings'>
                    <label> Work Time </label>
                    <input class='settingInput' type='number' id='workInput'> 

                    <label id='short-break'> Short Break </label>
                    <input class='settingInput' id='shortBreak'> 

                    <label id='long-break'> Long Break </label>
                    <input class='settingInput' id='longBreak'>

                    <button id = 'set-values'>Submit</button>
                </form>

* javascript для хранения и извлечения данных:

var workInputValue     = document.getElementById('workInput').value;
var workTimeSerialized = JSON.stringify(document.getElementById('workInput').value);
var workTimeFinal      = JSON.parse(localStorage.getItem('workTimeKey'));

submitButton.addEventListener('click', (e) => {
    localStorage.setItem('workTimeKey', workTimeSerialized);
    console.log('submit pressed');
    e.preventDefault();
})

Вот кодекс для всего проекта: https://codepen.io/Games247/pen/XWJqebG

Я впервые использую setItem и getItem, поэтому я могу пропустить что-то очевидное.

В настоящее время это выглядит как пара скобок хранится в localStorage, где должен быть workTimeKey.

Answer 1

У вашего связанного кода на codepen есть проблема, на самом деле код, указанный здесь, исправляет указанную проблему.

var workTimeSerialized = JSON.stringify(document.getElementById('workInput'));

Выше указан ваш код, проблема в том, что вы пытаетесь сериализовать элемент HTML в JSON, а не в его значение, поэтому '{}' вы видите в хранилище сеанса.

Вам необходимо убедиться, что это значение входного элемента, а не самого элемента, который вы сериализуете. Как я уже упоминал, ваш код, размещенный здесь, решает проблему;

var workTimeSerialized = JSON.stringify(document.getElementById('workInput').value);

Примечание. Всякий раз, когда вы видите «[]» или «{}» в хранилище сеанса, а не намеченное значение, вы либо передаете объект непосредственно или элемент в вашем случае.

Редактировать: 'вы наиболее вероятно не либо'

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

Итак, ваш код:

var workInputValue     = document.getElementById('workInput').value;
var workTimeSerialized = JSON.stringify(document.getElementById('workInput').value);
var workTimeFinal      = JSON.parse(localStorage.getItem('workTimeKey'));

submitButton.addEventListener('click', (e) => {
    localStorage.setItem('workTimeKey', workTimeSerialized);
    console.log('submit pressed');
    e.preventDefault();
})

становится:

submitButton.addEventListener('click', (e) => {
var workInputValue     = document.getElementById('workInput').value;
var workTimeSerialized = JSON.stringify(document.getElementById('workInput').value);
var workTimeFinal      = JSON.parse(localStorage.getItem('workTimeKey'));
    localStorage.setItem('workTimeKey', workTimeSerialized);
    console.log('submit pressed');
    e.preventDefault();
})