Reputation: 2268

how to modify existing object inside an array in localstorage

I have an array that contains objects and then the array is stored in localStorage. I want to be able to modify variable inside an the object after it's been stored in localStorage. The item I want to modify is when detecting the corresponding checkbox being checked, I want to change the status of that checkbox from false to true. What's the best way to do that. here's the code

<!DOCTYPE html>
<html>
<head>
    <title>TodoList App</title>
    <!-- bootstrap cdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">

    <style type="text/css">
        /*variables*/
        :root {
            --righteous-font: 'Righteous', cursive;
        }

        body {
            /*background-color: #536691;*/
            background-image: url("http://pctechtips.org/apps/todo/img/Chicago-Wallpaper-3.jpg");
            min-height: 100vh;
            z-index: -10;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
            font-size: 1.3rem;          
        }
        .hero {
            position: absolute;
            min-height: 100vh;
            min-width: 100vw;
            top: 0;
            bottom: 0;
            background-color: rgba(31, 34, 118, 0.5);
        }

        h1 {
            margin-top: 12rem;
            margin-bottom: 0px;
            padding-bottom: 0px;
            font-family: var(--righteous-font);
        }

        .lead {
            font-size: 1.5rem;
            font-family: var(--righteous-font);
        }

        /*hr {
            margin-top: 2rem;
            border: 1px solid white
        }*/
        ul {
            /*border-top: 2px solid white;*/
            margin-top: 2rem;
            list-style: none;
            /*display: none;*/
        }
        li {
            border-bottom: 1px solid white;
            padding: 0.5rem 0 0.5rem 0;
            margin: 0 1rem 0 1rem;
        }
        .checkboxes {
            float: right;
            line-height: 15px;
            width: 17px;
            height: 17px;
            background-color: #e9ecef;
            border: 1px solid #e9ecef;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div class="hero">
        <div class="container">
            <h1 class="display-2 text-center">TodoList</h1>
            <p class="lead text-center">Welcome to my todoList applications</p>
            <div class="row">
                <form id="form" class="col-8 mx-auto">
                    <div class="input-group">
                        <input id="input" class="form-control" placeholder="Enter todo list item" value="this is a todo item list">
                        <span>
                            <button id="btn" type="button" class="btn btn-primary">Submit</button>
                        </span>
                    </div>               
                </form>
            </div>          
            <div class="row">               
                <ul id="list" class="list col-8 mx-auto">
                    <!-- <li>this is a todo item <input type="checkbox" class="checkbox"></li>
                    <li>this is a todo item <input type="checkbox" class="checkbox"></li> -->
                </ul>
            </div>              
        </div>
    </div>

    <script type="text/javascript">
        window.onload = function() {
            //variables
            var list = document.getElementById("list");
            var input = document.getElementById("input");
            var btn = document.getElementById('btn');
            var id = 1;
            var todoList = []; 
            //{item: "item", isChecked: "false"};
            var todoItem = "";

            //button event listener
            btn.addEventListener("click", addTodoItem);

            //list event listener for checkbox
            list.addEventListener("click", boxChecked);

            if(localStorage.length > 0) {
                displayList();
            }

            //add todo list item
            function addTodoItem() {
                if(input.value === "") {
                    alert("Input field can't be empty!");
                }
                else {
                    if(list.style.borderTop === "") {
                        list.style.borderTop = "2px solid white";
                    }
                    var li = document.createElement("li");
                    var text = document.createTextNode(input.value);
                    li.id = "li-"+id;
                    var checkbox = document.createElement("input");
                    checkbox.type = "checkbox";
                    checkbox.className = "checkboxes"
                    checkbox.id = "box-"+id;
                    li.appendChild(text);
                    li.appendChild(checkbox);
                    list.appendChild(li);
                    id++;
                    addToLocalStorage();
                }
            }

            //adding strike through style when checkbox clicked
            function boxChecked(event) {
                const element = event.target;
                //ignore clicks on anything else other than checkbox
                if(element.type !== "checkbox") return;
                console.log(element.id);
                //apply css style
                element.parentNode.style.textDecoration = "line-through";
            }

            //adding items to localstorage
            function addToLocalStorage() {
                console.log(localStorage.toString());
                todoItem = {item: input.value, isChecked: "false"};
                todoList.push(todoItem);
                //checking localsotorage exists
                if(typeof(Storage) !== "undefined") {
                    localStorage.setItem("todoList", JSON.stringify(todoList));
                }
                else {
                    alert("localstorage not available in browser!");
                }
            }

            /* display all todo list items */ 
            function displayList() {
                todoList = JSON.parse(localStorage.getItem("todoList"));
                list.style.borderTop = "2px solid white";
                for(var i = 0; i < todoList.length; i++) {
                    var li = document.createElement("li");
                    var text = document.createTextNode(todoList[i].item);
                    li.id = "li-"+id;
                    var checkbox = document.createElement("input");
                    /*if(Boolean(todoList[i].isChecked)) {
                        checkBox.checked = true;
                        checkBox.style.textDecoration = "line-through";
                    }*/
                    checkbox.type = "checkbox";
                    checkbox.className = "checkboxes"
                    checkbox.id = "box-"+id;
                    li.appendChild(text);
                    li.appendChild(checkbox);
                    list.appendChild(li);
                    id++;
                }
            }
        }


    </script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</body>
</html>

Upvotes: 0

Answers (1)

Felipe Augusto

Reputation: 8184

I would make that inside the boxChecked function:

function boxChecked(event) {
    const element = event.target;
    //ignore clicks on anything else other than checkbox
    if(element.type !== "checkbox") return;

    var newTodo = JSON.parse(localStorage.getItem("todoList"))[element.id.slice(element.id.length-1)-1];
    newTodo.isChecked = element.checked.toString();

    var todoList = JSON.parse(localStorage.getItem("todoList"));
    todoList[element.id.slice(element.id.length-1)-1] = newTodo;

    localStorage.setItem("todoList", JSON.stringify(todoList));
    //apply css style
    element.parentNode.style.textDecoration = "line-through";
}

Upvotes: 3

how to modify existing object inside an array in localstorage

Answers (1)

Related Questions