Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm trying to create a simple quest tracker in React, I want the checked value of true to persist in localStorage, but I'm getting this error. I understand that the arguments can only be strings so I tried JSON.stringify the boolean value but it still returns 1 argument. Here is the checkbox I've mapped to each quest in an array.

{props.mainQuests.map((quest, i) => {
    return (
        <div className="questlist">
            <li key={quest} className="quest">
                <p className="questName">{quest}</p>
                <p className="questDesc">{mainQuestDesc[i]}</p>
                <label for="completed">Completed</label>
                <input
                  type="checkbox"
                  name="completed"
                  id={quest}
                  onChange={props.toggleCheckboxChange}
                  autoComplete="off"
                ></input>
And here is the function declared in the App.js component.
toggleCheckboxChange = (e) => {
    e.preventDefault();
    if (e.target.type === "checkbox") {
        const current = JSON.stringify(e.target.checked);
        console.log(e.target.id);
        console.log(current);
        localStorage.setItem({ [e.target.id]: current });
Both the console logs return string values, so I'm quite confused, any help would be greatly appreciated :)
                localStorage.setItem({ [e.target.id]: current }); why did you want to pass one argument here? could have done localStorage.setItem(e.target.id,  current);
– sourav satyam
                Jan 28, 2021 at 11:32
Please follow the Documentation yes localstorage need to pass string as a value but it's also need key check this localstorage example
in your case your have to pass it like this it's just a sentax error try this below
localStorage.setItem(e.target.id , current );
localStorage.setItem(key , stringValue);
There are two ways to set a localStorage value, the first one being:
localStorage.setItem(e.target.id, current);
and the second one, perhaps even simpler:
localStorage[e.target.id] = current;
For more examples, see e.g. https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
And a note of interest, I see you are already doing this so that's good: localStorage will convert every value that is not a string by first doing .toString() on the value. As a result it is best to use JSON.stringify(obj) to store numbers, booleans, arrays and objects; and use let obj = JSON.parse(valueFromLocalStorage) to retrieve them again, which works for all object types.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.