Javascript [SOLVED]: Local storage being read too many times

Javascript [SOLVED]: Local storage being read too many times

Home Forums Scripting Javascript Tutorials Javascript [SOLVED]: Local storage being read too many times

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #245696

    Cloudy Point
    Keymaster

    QuestionQuestion

    I am trying to write the values of checkboxes to local storage and then retrieve them. Setting the values works fine. However, when I try to access local storage it accesses it too many times and the number of times it accesses it increments each time the function is called. For example, the first time the function is called a single array is printed to the console. The second time 2 arrays are printed, the third time three arrays are printed and so on.

    My subsequent code goes on to display the items from the array in an HTML list, therefore, having multiple arrays confuses it and duplicates the data

    Any clue how I can prevent the array from being generated multiple times?
    I have attempted to remove the for loop to see if that is the cause but this makes no difference. As far as I am aware it is a problem with the first part but I am not too sure where

    $("#confirm-button").click(function(event){
        event.preventDefault();
        if (localStorage.length===0) {
            createAlbum();
        }
        else if (localStorage.length>0) {
            document.getElementById("confirmation").style.display="block";
            $("#Yes").click(function(event){
                event.preventDefault();
                localStorage.clear();
                createAlbum();
                document.getElementById("confirmation").style.display="none";
            })
            $("#No").click(function(event){
                event.preventDefault();
                document.getElementById("confirmation").style.display="none";
            })
        }
    });
    
    function createAlbum(){
        if ($("li input:checkbox:checked").length===0){
            alert("You have not selected any songs. Please select at least one song")
        }
        else if ($("li input:checkbox:checked").length>0) {
            var searchIDs = $("li input:checkbox:checked").map(function () {
                return $(this).val();
            }).get();
            localStorage.setItem('searchIDs', JSON.stringify(searchIDs));
            retrievedObject = localStorage.getItem('searchIDs');
            var information = JSON.parse(retrievedObject);
            console.log(information);
            $('#overlay_text').append("<ol id='newList'></ol>");
            for (var i = 0; i < information.length; i++) {
                var item = document.createElement('li');
                item.append(information[i]);
                $('#newList').append(item);
            }
          }
    }
    

    HTML:

    <div id="overlay">
        <div id="overlay_text">
        </div>
    </div>
    <div id="confirmation">
        <div id="confirmation-text">
        An album already exists are you sure you want to overwrite it?
        <button id="Yes">Yes</button>
        <button id="No">No</button>
        </div>
    </div>
    

    EDIT

    Included the code that calls the function. The first bit is to check if any values currently exist in local storage. If no values exist the function is called. If values do exist the user is then asked if they wish to overwrite this data. ‘confirmation’ is the window that displays the message about overwriting data to the user

    #245697

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    I suspect your problem is a result of creating event listeners inside the handler of another event. This is a bad practice in general

    Every time the confirm button is clicked you add a new listener to the Yes/No buttons and thus the event handlers for Yes/No are getting called multiple times (once for every time user clicks on confirm)

    Move your Yes/No click listeners outside of $("#confirm-button").click or use off() before adding a new click

    $("#Yes").off('click').on('click', function(event){...
    

    Source: https://stackoverflow.com/questions/48026570/local-storage-being-read-too-many-times
    Author: charlietfl
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.