gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 03:43:39 24 4
gpt4 key购买 nike

我的主要要求是通过单击相关按钮生成一个 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。

提前致谢。

最佳答案

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

从那里您可以使用循环从所选值构建对象,将新的 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 示例中,通过在开发工具中打开“网络”面板,您可以在单击按钮时看到查询字符串正在更新。

关于javascript - 将多个值保存到 LocalStorage 中的相同类型,然后检索值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65529190/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com