如何在url中正确设置/读取查询参数?

Question

我使用 React，我有过滤器组件，它有一些表单元素，如复选框、输入、选择和我，当我单击按钮"应用过滤器"时，我想将数据从过滤器保存在 URL 中，然后在重新加载页面后从那里读取它。

我使用 useQueryParams 在 URL 中设置数据。例如过滤器/商店=球&商店=电话和商店=苹果

如何将 URL 转换为正确的 JS 数据类型。可能有人知道一些 npm 包。

例如，我有网址过滤器/商店=球&商店=电话&商店=苹果&计数=123&名称=示例

我想得到一个像这样的对象

{
shop: [ball,phone,apple],
count:123,
name:'example"
}

谢谢你的帮助

Answer 1

function parseQuery() {
const qs = window.location.search.replace('?', '')
const items = qs.split('&')
return items.reduce((data, item) => {
const splittedItem = item.split('=')
const key = splittedItem[0]
const value = splittedItem.length > 2 ? window.decodeURIComponent(splittedItem.slice(1).join('=')) : splittedItem[1]
if(data[key] !== undefined) {
if(!Array.isArray(data[key])) {
data[key] = [ data[key] ]
}
data[key].push(value)
} else {
data[key] = value
}
return data
}, {})
}