CODEWITHSUNDEEP
javascripthtmllocal-storage
games247
games247

Reputation: 65

Why isn't my localStorage.setItem() and localStorage.getItem() storing a value?

I want to store a user input value using localStorage then use that value in my countdown timer.

Here is the HTML where the user inputs their data:

<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>

this is the javascript to store and retrieve the data:

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();
})

Here is the codepen for the whole project: https://codepen.io/Games247/pen/XWJqebG

This is my first time using setItem and getItem so I may be overlooking something obvious.

Currently it looks like a pair of brackets is stored in the localStorage where workTimeKey should be.

Upvotes: 0

Views: 557

Answers (1)

Travis Sowoolu
Travis Sowoolu

Reputation: 63

Your linked code on codepen has a problem, in fact the code posted here corrects said problem.

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

The above is your codepen, the problem is you are trying to serialize the HTML element to JSON rather than it's value hence the '{}' you see in your session storage.

You need to ensure it's the value of the input element and not the element itself you serialize. Like i mentioned, your code posted here resolves the issue ;

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

Note: Whenever you see '[]' or '{}' in session storage rather than your intended value, you are either passing an object directly or an element in your case.

Edit: 'you are most likely not either'

Your input values should be read in the submit click handler otherwise, you get the value of the input before sumbit and not after

So your code:

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();
})

becomes:

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();
})

Upvotes: 1

Related Questions