Can someone help me understand what the problem here is and possible solutions?

Question

Can someone help me understand what the problem here is and possible solutions?

50 Views Asked by iBuzz At 26 March 2024 at 04:36

I"m still new to JS and localStorage and I'm trying to understand it better. I am trying to be able to take 2 inputs from the user and when a button is clicked it displays those values (sort of like a todo list). I'm trying to implement localStorage and I'm able to save the key/value pair but I can't seem to display them properly. I'm able to click the button and display the values the first time I do it but the second click gives me a "Unexpected non-whitespace character after JSON at position 24 (line 1 column 25)" console message after.

Can someone help me understand what the problem is? My goal is figure out how to display multiple items stored in a object.

Here is my code

HTML

<body>
    
    <div class="container">
        <input type="text" class="inputField">
        <input type="text" class="inputFieldTwo">
        <button id="btn">Click</button>

        <div class="sample">
            
        </div>

        
    </div>
    
    <script src="main.js"></script>
</body>

JS

const userInput = document.querySelector(".inputField");
const userInputTwo = document.querySelector(".inputFieldTwo");
const button = document.querySelector("#btn");
const contain = document.querySelector('.sample');

let arr = [];


button.addEventListener("click", () => {
    let thisObj = {
        user: `${userInput.value}`,
        num: `${userInputTwo.value}`
    }

    let strObj = JSON.stringify(thisObj);
 
    arr.push(strObj)

    localStorage.setItem("data", arr)

    let parseObj = JSON.parse(arr);

    for (let i = 0; i < arr.length; i++) {
        let input = document.createElement("input");
        let inputTwo = document.createElement("input");
        input.type = "text";
        inputTwo.type = "number";

        input.value = parseObj.user
        inputTwo.value = parseObj.num
 
        localStorage.setItem("data", JSON.stringify(arr));

        contain.appendChild(input);
        contain.appendChild(inputTwo);
        return
    }
})

Original Q&A

There are 1 best solutions below

**makkusu** · Answer 1 · 2024-03-26T12:14:19.713000

I see setItem item twice but you never actually try to return the localStorage by using getItem. For setting the localStorage value I would do something like this:

// Save data as object
let thisObj = {
    user: userInput.value,
    num: userInputTwo.value
}

// Add to your global array
arr.push(thisObj);

// Stringify array and save data to localStorage
localStorage.setItem("data", JSON.stringify(arr));

Then for reading data you can do it like this:

// Read data from localStorage and parse JSON
let parseObj = JSON.parse(localStorage.getItem('data'));

Then inside of your loop you could access the entries as follows

let entry = parseObj[i];
input.value = entry.user
inputTwo.value = entry.num

I'd suggest to also initially get the data from localStorage before any click happened and adding the data to your global arr-Array. This way you will also have the saved data on page load (currently you would have to add a new entry to see the rest of the data)

Can someone help me understand what the problem here is and possible solutions?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in LOCAL-STORAGE

Trending Questions

Popular # Hahtags

Popular Questions