im trying to save Expanded/Collapsed states of my Bootstrap Collapses.

Im saving it in the LocalStorage and Reading it out of it.

$(".content-accordion-content").each(function (index) {
                console.log(index, $(this).attr("id"));
                $(this).on("show.bs.collapse", function () {
                    var expandedCollapses = localStorage.getItem("ExpandedCollapses");
                    if (expandedCollapses !== undefined && expandedCollapses !== null && expandedCollapses !== "") {
                        expandedCollapses = expandedCollapses   "|"   $(this).attr("id");
                    }
                    else {
                        expandedCollapses = $(this).attr("id");
                    }
                    localStorage.setItem("ExpandedCollapses", expandedCollapses);
                })
                $(this).on("hide.bs.collapse", function () {
                    var expandedCollapses = localStorage.getItem("ExpandedCollapses");
                    if (expandedCollapses !== undefined && expandedCollapses !== null) {
                        if (!expandedCollapses.includes("|") && expandedCollapses.includes($(this).attr("id")))
                            expandedCollapses = "";
                        else {
                            var ecArr = expandedCollapses.split("|");
                            expandedCollapses = ecArr.splice(ecArr.indexOf($(this).attr("id")), 1).join("|");
                        }
                        localStorage.setItem("ExpandedCollapses", expandedCollapses);
                        console.log(expandedCollapses,$(this).attr("id"));
                    }
                })
            });

It seems to work, but sometimes it removes multiple Entries from the Array. For Example I Open Authors then Open Books then Open Videos. the string Looks like this "Authors|Books|Videos" If i close Books now, its only "Authors" Can someone help me unstuck my brain?

CodePudding user response：

Whoops, found it. I joined the outcome of the .splice() method. which turns out the be wrong. this here fixed my code

var ecArr = expandedCollapses.split("|");
ecArr.splice(ecArr.indexOf($(this).attr("id")), 1);
expandedCollapses = ecArr.join("|");

CodePudding user response：

You can use filter instead of splice.

Makes the process a little simpler because we don't actually need to know the index of the value we want to remove.

let currentValue = "";
function toggleValue(_value) {
   let splitValue = currentValue.split("|").filter(_=>_);
   // split by '|'
   // as well as filter out falsy string values i.e. ""
   if (splitValue.includes(_value)) {
    // check if the array includes the value
    // we can use includes because we arent checking for complex types
    splitValue = splitValue.filter(v => v !== _value);
    // filter out the value that already exists in the array
   } else {
    splitValue.push(_value);
    // we know the value doesn't exist so we can safely push it to the array
   }
   const newValue = splitValue.join("|");
   // join the array with '|'
   updateValue(newValue);
}

//#region Ignore This
function updateValue(_value) {
  currentValue = _value;
  document.getElementById("output").innerHTML = currentValue;
}
//#endregion

<button onclick="toggleValue('author')">Toggle Author</button>
<button onclick="toggleValue('books')">Toggle Books</button>
<button onclick="toggleValue('videos')">Toggle Videos</button>
<div id="output"></div>