Save multiple values to same type in LocalStorage then retrieve the values

user_6483933 0
Viewed 198

My main requirement is to generate a URL by clicking on the relevant button. For example If I click on the green and red button then it should append &_colour=green%2Cred in the url and similar for Gender's button after saving and getting values from localStorage.

example.com/product-category/glasses/?_gender=women%2Cmen&_colour=green%2Cred

<div class="main-section">
    <div class="section">
        <button data-gender="men">Men</button>
        <button data-gender="women">Women</button>
    </div>
    <div class="section">
        <button data-colour="green">green</button>
        <button data-colour="red">Red</button>
    </div>
</div>

jQuery('.section button').click(function(e){
    e.preventDefault();
    var gender = jQuery(this).data("gender");
    var colour = jQuery(this).data("colour");
    localStorage.setItem("gender", gender);
    var x = localStorage.getItem("gender");
    console.log(x);
});

The question is how to save multiple values against the same type and retrieve the values to create the url.

Thanks in Advance.

local-storage jquery javascript
2 Answers

To retrieve multiple values you need to loop through all the buttons in the page and find the ones which have been clicked on. You can toggle a class on the buttons when they are clicked in order to identify them more easily.

From there you can use a loop to build an object from the selected values, adding a new data-category attribute to the .section elements to provide the keys in that object.

Finally you can use a URLSearchParams object to build the updated querystring from that object before applying that to history.pushState() to update the current URL.

Put all that together and you get this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
  <div class="section" data-category="gender">
    <button data-value="men">Men</button>
    <button data-value="women">Women</button>
  </div>
  <div class="section" data-category="colour">
    <button data-value="green">green</button>
    <button data-value="red">Red</button>
  </div>
</div>

jQuery($ => {
  let $buttons = $('.section button').click(e => {
    e.preventDefault();
    $(e.target).toggleClass('active');
    let data = buildButtonDataObject();
    let querystring = new URLSearchParams(data).toString();

    localStorage.setItem('data', data);
    console.log(data);
    history.pushState(data, 'Page title here', querystring);
    console.log(querystring);
  });
});

let buildButtonDataObject = () => {
  let obj = {};
  $('.section:has(.active)').each((_, s) => obj[s.dataset.category] = $(s).find('button.active').map((_, b) => b.dataset.value).get());
  return obj;
}

Working example

In the jsFiddle example, you can see the querystring being updated as you click the buttons by opening the 'Network' panel in dev tools.

user_5194130

You want to make 1 click function and apply for all button in that and assign to local storage ?

  $('.section button').each(function () {
    var $this = $(this);
    $this.on("click", function () {
      var gender = $this.data("gender");
      var colour = $this.data("colour");
      if (gender != undefined) {
        localStorage.setItem("gender", gender);
      }
      if (colour != undefined) {
        localStorage.setItem("colour", colour);
      }
    });
  });

I add click function to all element in that class ".section button" and check the data and assign in local storage .

Easy way just make onclick to button and pass parameter to function and assign it into localstorage.

hope this can help u.

sorry for bad English.

user_83224100
Related