将多个值保存到 LocalStorage 中的同一类型，然后检索这些值

Question

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.

Answer 1

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.

Answer 2

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.