如何使用现代浏览器在页面重新加载时保留菜单状态？

页面重新加载时保持菜单状态

问题陈述：

您有一个包含多个链接的菜单，其中：

• 悬停时，所选链接向右平移 1.5em。
• 单击时，即使在页面重新加载后，单击的链接仍保持在翻译位置，直到出现不同的链接。

解决方案：利用 localStorage

为了实现所需的菜单行为，我们可以利用 HTML5 localStorage 来存储和检索所选链接的状态。以下是分步指南：

1. 创建本地存储变量：创建一个变量来存储所选链接的 ID 或类。例如：

<code class="js">const selectedLinkId = localStorage.getItem('selectedLinkId');</code>

2. 页面加载时更新菜单：页面加载时，检查 selectedLinkId 变量是否存在。如果是，请选择相应的链接并应用翻译后的位置：

<code class="js">if (selectedLinkId) {
  $(`#${selectedLinkId}`).addClass('hovered').siblings().removeClass('hovered');
}</code>

3. 在链接单击时保存菜单状态：单击链接时，保存localStorage 变量的单击链接的 ID 或类：

<code class="js">$('#menuLinks').on('click', function() {
  localStorage.setItem('selectedLinkId', $(this).attr('id'));
});</code>

4. 页面更改时清理： 如果要在不同页面时重置菜单状态加载后，向 pageshow 事件添加事件侦听器并清除 localStorage 变量：

<code class="js">window.addEventListener('pageshow', function() {
  localStorage.removeItem('selectedLinkId');
});</code>

存储位置的优点和缺点：

• 本地存储：

  • 优点：跨会话和浏览器选项卡持续存在，可通过 JavaScript 访问。
  • 缺点:存储容量有限，用户可以手动删除数据。

• 服务器端：

  • 优点：无限存储容量，更安全。
  • 缺点：需要额外的设置和检索更复杂。

最终，最佳存储位置取决于您的具体要求。 localStorage 是不需要大量存储的持久用户设置的合适选项。

以上是如何使用现代浏览器在页面重新加载时保留菜单状态？的详细内容。更多信息请关注PHP中文网其他相关文章！