CODEWITHSUNDEEP
javascriptjquery
anon
anon

Reputation: 75

Locally storing my div in html to save when page is refreshed

I created a div which contains my counter that displays the "(n) option(s) selected." I want to locally store my div into html so that when I refresh my page it remains active. I am new to local storage, but understand it works with key value pairs.

I have created two variables:

  1. var get_count = document.getElementsByClassName("counter");
  2. var save_count = localStorage.getItem("counter");

My first variable returns an HTMLCollection[] and my second variable is returned as undefined. I am confused how to handle my key value pairs in my HTMLCollection[]. How can I locally store my div container that displays the total number of options selected?

$(document).ready(() => {
$.fn.select2.amd.require([
    'select2/utils',
    'select2/dropdown',
    'select2/dropdown/attachBody'
], function (Utils, Dropdown, AttachBody) {
    /* gets item */
        var previousSelectionCount = window.localStorage.getItem('selectCount');
    console.log('*****', previousSelectionCount);
    function SelectAll() { }
        SelectAll.prototype.render = function (decorated) {
            var $rendered = decorated.call(this);
            var self = this;

            //define the buttons inside the menu
            var $selectAll = $('<input type="checkbox"> Select/Unselect All</input>' );
         
            //append the buttons inside the menu
            $rendered.find('.select2-dropdown').prepend($selectAll);

            $selectAll.on("click", function (e) {

              var $results = self.$element.find("option").map(function (idx, ele) {
                return ele.value;
              });
              if($(this).prop("checked") == true){
                self.$element.val($results).trigger("change");
              }
              else{
                self.$element.val(null).trigger("change");
              }
              self.trigger("close")
            });
            return $rendered;
        };
        $(".js-source-states").select2({
        allowClear: true,
        tag: false,
        closeOnSelect: false,
        placeholder: "Search",
        dropdownAdapter: Utils.Decorate(
            Utils.Decorate(
                Dropdown,
                AttachBody,
            ),
            SelectAll
        ),
        });
            var placeHolderValue = `${previousSelectionCount}` ? previousSelectionCount : ' # options selected'
         var $selectNumber = $(`<div class="counter"> ${placeHolderValue} options selected</div>`);
            $(".js-source-states").after($selectNumber);
          
            $(".js-source-states").on("change", function (e){
            var selectedOptions =  $(this).select2('data').length;
            console.log('helllooooo', selectedOptions);
            window.localStorage.setItem('selectCount', selectedOptions)
            $(this).next(".counter").html(selectedOptions + ' options selected');
         });
    });
});
@import url("//cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css");

select{
  width: 100%;
  display: block;
  margin: 0;
}
ul.select2-selection__rendered li.select2-selection__choice{
  display: none !important;
}

.counter{
  position: relative;
  /* z-index: 100; */
  display: block;
  height: 34px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 8px 40px 8px 8px;
  border-radius: 2px;
}


.select2-results__option.select2-results__option--selected{
  background: blue;
}
.select2-results__option.select2-results__option--highlighted.select2-results__option--selectable
{
  background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.full.min.js"></script>
<body>
<select class="js-source-states" multiple="multiple">
  <option value="AK">Alaska</option>
  <option value="HI">Hawaii</option>
  <option value="CA">California</option>
  <option value="NV">Nevada</option>
  <option value="OR">Oregon</option>
  <option value="WA">Washington</option>
  <option value="AZ">Arizona</option>
  <option value="CO">Colorado</option>
  <option value="ID">Idaho</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NM">New Mexico</option>
  <option value="ND">North Dakota</option>
  <option value="UT">Utah</option>
  <option value="WY">Wyoming</option>
  <option value="AL">Alabama</option>
  <option value="AR">Arkansas</option>
</select>
<div>
  <pre>
    
    
  </pre>
</div>
<select class="js-source-states" multiple="multiple">
  <option value="AK">Alaska</option>
  <option value="HI">Hawaii</option>
  <option value="CA">California</option>
  <option value="NV">Nevada</option>
  <option value="OR">Oregon</option>
  <option value="WA">Washington</option>
  <option value="AZ">Arizona</option>
  <option value="CO">Colorado</option>
  <option value="ID">Idaho</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NM">New Mexico</option>
  <option value="ND">North Dakota</option>
  <option value="UT">Utah</option>
  <option value="WY">Wyoming</option>
  <option value="AL">Alabama</option>
  <option value="AR">Arkansas</option>
</select>
</body>

Upvotes: 1

Views: 377

Answers (1)

Lajos Arpad
Lajos Arpad

Reputation: 76454

You can store it like this:

localStorage.setItem("counter", document.getElementsByClassName("counter")[0]);

And you can load like this:

var save_count = localStorage.getItem("counter");

Yes, you are loading it correctly, but since you never saved it, you have nothing to load.

Upvotes: 1

Related Questions