javascript - 将多个值保存到 LocalStorage 中的相同类型，然后检索值

Question

我的主要要求是通过单击相关按钮生成一个 URL。例如如果我点击绿色和红色按钮，那么它应该在 url 中附加 &_colour=green%2Cred 并且在保存并从 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);
});

问题是如何针对同一类型保存多个值并检索这些值以创建 url。

提前致谢。

Answer 1

要检索多个值，您需要遍历页面中的所有按钮并找到已被单击的按钮。您可以在单击按钮时切换按钮的类别，以便更轻松地识别它们。

从那里您可以使用循环从所选值构建对象，将新的 data-category 属性添加到 .section 元素以提供键那个对象。

最后，您可以使用 URLSearchParams 对象从该对象构建更新的查询字符串，然后再将其应用于 history.pushState() 以更新当前 URL。

把所有这些放在一起，你会得到这个:

<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

在 jsFiddle 示例中，通过在开发工具中打开“网络”面板，您可以在单击按钮时看到查询字符串正在更新。