Javascript 重新加载浏览器后如何保持在选定的切换按钮/页面中

我有下面的工作代码，在第一次打开或重新加载页面时，默认使用菜单-1/content-1。但是，我想知道是否有办法在重新加载浏览器后保留在选定的菜单/内容中，也就是说，如果在实例中，我单击了菜单-2并重新加载了浏览器，那么我仍然会在菜单-2上，如果我选择了任何其他选项，情况也一样

这可能吗

提前感谢您的建议

注：这是我的代码笔，以防你觉得更简单：

$（文档）.ready（函数（）{
//仅显示菜单-1
$（'.menu-1'）。单击（函数（）{
if（$（'.menu-2，.menu-3'）.hasClass（'active'））{
$（'.menu-2、.menu-3'）.removeClass（'active'）；
$（'.content-2、.content-3'）.removeClass（'active'）；
}
$（'.menu-1'）.addClass（'active'）；
$（'.content-1'）.addClass（'active'）；
});
//仅显示菜单-2
$（'.menu-2'）。单击（函数（）{
if（$（'.menu-1，.menu-3'）.hasClass（'active'））{
$（'.menu-1、.menu-3'）.removeClass（'active'）；
$（'.content-1、.content-3'）.removeClass（'active'）；
}
$（'.menu-2'）.addClass（'active'）；
$（'.content-2'）.addClass（'active'）；
});
//仅显示菜单-3
$（'.menu-3'）。单击（函数（）{
if（$（'.menu-2，.menu-1'）.hasClass（'active'））{
$（'.menu-2、.menu-1'）.removeClass（'active'）；
$（'.content-2、.content-1'）.removeClass（'active'）；
}
$（'.menu-3'）.addClass（'active'）；
$（'.content-3'）.addClass（'active'）；
});  
});
.container{
保证金：0自动；
背景色：#eee；
边框：1px纯色浅灰色；
宽度：20vw；
高度：90vh；
字体系列：无衬线；
位置：相对位置；
}
标题{
背景颜色：浅绿色；
填充物：5px；
文本对齐：居中；
文本转换：大写；
}
.底部导航栏{
位置：绝对位置；
底部：0；
宽度：100%；
填充：6px0；
溢出：隐藏；
背景颜色：浅绿色；
边框顶部：1px实心变量（--颜色-灰色-深色-3）；
z指数：50；
显示器：flex；
证明内容：之间的空间；
>a{
显示：块；
颜色：绿色；
文本对齐：居中；
文字装饰：无；
字体大小：20px；
填充：0 10px；
&.主动{
颜色：黑色；
}
}
}
.menu-1.active，
.menu-2.active，
.menu-3.active{
颜色：黑色；
}
.content-1，
.content-2，
.内容-3{
显示：无；
}
.content-1.active，
.content-2.active，
.content-3.active{
显示：块；
位置：绝对位置；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
}

我的头球
内部内容
地图内容
探索内容
一种方法是将选择保存在
本地存储或会话存储
并在浏览器重新加载时阅读。
由于浏览器重新加载将从一开始就完全重新呈现应用程序，我还没有想到任何其他选项。
一种方法是将选择保存在
本地存储或会话存储
并在浏览器重新加载时阅读。
由于浏览器重新加载将从一开始就完全重新呈现应用程序，因此我还没有想到任何其他选项。
有3种方法可以做到这一点，如下所示：

1。在URL中使用散列：
每次单击/更改菜单时，在URL中设置一个哈希（例如www.yoursite.com#menu1）。然后每次加载页面时读取当前哈希值，如果URL中有哈希值，则设置菜单

注意：如果用户关闭浏览器并稍后返回，或者使用其他机器，则不会看到以前选择的菜单。仅当单击浏览器的刷新（按F5的次数）时，用户才会看到以前选择的菜单

2。本地存储或cookie:
在本地存储器或cookie中存储并更新当前选择。然后在加载时读取本地存储或Cookie以决定显示哪个菜单。本地存储位于用户的当前浏览器中，并将一直保留，直到您或客户端将其删除。这意味着用户每次返回时都会看到以前选择的菜单

注1：cookie可以设置为在浏览器关闭时过期，这样，如果用户关闭并打开浏览器，他们将不会看到以前选择的菜单

注2：如果用户使用不同的机器或浏览器返回，他们将不会记住菜单

3。服务器端存储：
如果您想永久性地存储用户的当前状态，并且可以跨浏览器和计算机使用，那么您应该将选择存储在服务器端（数据库或文件）

注意：用户必须登录才能成功识别他们，这可能不可取

因此，根据您的问题和评论，建议选择1。或选项2，其cookie在浏览器关闭时过期

有3种方法可以做到这一点，如下所示：

1。在URL中使用散列：
每次单击/更改菜单时，在URL中设置一个哈希（例如www.yoursite.com#menu1）。然后每次加载页面时读取当前哈希值，如果URL中有哈希值，则设置菜单

注意：如果用户关闭浏览器并稍后返回，或者使用其他机器，则不会看到以前选择的菜单。仅当单击浏览器的刷新（按F5的次数）时，用户才会看到以前选择的菜单

2。本地存储或cookie:
在本地存储器或cookie中存储并更新当前选择。然后在加载时读取本地存储或Cookie以决定显示哪个菜单。本地存储位于用户的当前浏览器中，并将一直保留，直到您或客户端将其删除。这意味着用户每次返回时都会看到以前选择的菜单

注1：cookie可以设置为在浏览器关闭时过期，这样，如果用户关闭并打开浏览器，他们将不会看到以前选择的菜单

注2：如果用户使用