如何存储 URL 参数，以便浏览器在刷新或发送链接到其他浏览器时记住它答案

【问题标题】：How to store URL Params, so browser remembers it when refresh or sending link to other browser如何存储 URL 参数，以便浏览器在刷新或发送链接到其他浏览器时记住它
【发布时间】：2021-08-02 18:25:29
【问题描述】：

我在 url 中附加输入值，我希望在共享链接或刷新页面时记住这些值。

目前我正在使用localStorage，这无助于解决这个问题。

URL 附加输入值：

useEffect(() => {
        const params = new URLSearchParams();
        params.append('contribution', count);
        params.append('employees', employees);
        params.append('savings', savings);

        history.push({ search: params.toString() });
    }, [count, employees, savings, history]);

获取数据表单输入示例：

onChange={(changeEvent) =>
         setCount(changeEvent.target.value)
          }

一切都很完美，这是 url 输出：

http://localhost:3000/myPage?contribution=0&employees=0&savings=0

数字会根据输入动态变化，尽管当我想与我选择的值共享链接时，它会将其刷新回 0。

正如我提到的，我将值存储在 localStorage 中，但它什么也不做

localStorage.setItem('contribution', count);

如何实现存储在 URL 中的值？

【问题讨论】：

您的应用程序有服务器/后端吗？
不，它是纯 React。

标签： javascript reactjs url parameters react-hooks

【解决方案1】：

localStorage.setItem('contribution', 345)

将 345 作为贡献值存储在 localStorage 中。您可以将值作为

localStorage.getItem('contribution');

【讨论】：

我不确定我明白你的意思，count 是我来自输入的动态值 - 所以输入中写入的任何内容也将写入 url contribution=count，我应该在哪里使用 getItem ?
@Eliot 我使用 345 而不是 count 的原因是为了排除计数初始化的问题。如果初始化正确，可以将 345 替换为 count。但请先尝试在控制台中运行上述两个命令。如果第二个产生 345，那么它可以工作。