如何实现正确登录后显示div并通过localStorage维持状态，隐藏登录元素？

功能需求 #

• 用户输入正确密码（示例为123）登录后，显示指定的HIDDENDIV元素
• 同时隐藏密码输入框和登录按钮
• 将登录状态存储到localStorage，页面刷新后已显示的内容保持可见
• 保留原有#bar元素的点击切换显示功能，且该状态也需持久化

实现思路 #

1. 页面初始化检查：加载页面时先读取localStorage中的登录状态，若已登录则直接显示目标div、隐藏登录控件；同时检查#bar的显示状态并恢复
2. 登录验证逻辑：点击登录按钮或按回车键时验证密码，正确则更新DOM状态，并将登录状态存入localStorage
3. 状态持久化：登录状态用独立的isLoggedIn字段存储，#bar的显示状态用barDisplay字段存储，避免状态混淆
4. DOM操作优化：统一用jQuery操作DOM，避免混合使用时的逻辑混乱

完整代码实现 #

HTML #

<input type="text" id="password" placeholder="输入密码">
<br>
<input id="loginBtn" type="button" value="Login">
<div id="HIDDENDIV" class="hidden">登录成功！这里是隐藏内容</div>

<div id="container">
  <a id="foo" href="javascript:void(0);">Click Me</a>
  <div class="conteudo1 hidden" id="bar">这是可切换的内容xxxxxx</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

CSS #

.hidden {
  display: none;
}

JavaScript #

$(document).ready(function() {
  // 初始化页面状态
  initPage();

  // 登录按钮点击事件
  $('#loginBtn').on('click', validatePassword);

  // 回车键触发登录
  $('#password').on('keydown', function(e) {
    if (e.keyCode === 13) {
      validatePassword();
    }
  });

  // #bar元素的切换事件
  $('#foo').on('click', function() {
    const $bar = $(this).siblings('#bar');
    $bar.toggle();
    localStorage.setItem('barDisplay', $bar.is(':visible'));
  });

  // 初始化页面状态函数
  function initPage() {
    // 检查登录状态
    const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
    if (isLoggedIn) {
      $('#HIDDENDIV').removeClass('hidden');
      $('#password, #loginBtn').addClass('hidden');
    }

    // 检查#bar的显示状态
    const barDisplay = localStorage.getItem('barDisplay') === 'true';
    if (barDisplay) {
      $('#bar').removeClass('hidden');
    }
  }

  // 密码验证函数
  function validatePassword() {
    const password = $('#password').val().trim();
    if (password === '123') {
      // 更新DOM状态
      $('#HIDDENDIV').removeClass('hidden');
      $('#password, #loginBtn').addClass('hidden');
      // 存储登录状态
      localStorage.setItem('isLoggedIn', 'true');
    } else {
      // 错误处理：选中输入框内容并提示
      $('#password').focus().select();
      alert('密码错误！请重试...');
    }
  }
});

代码说明 #

• 新增isLoggedIn字段专门存储登录状态，和barDisplay字段分开，避免状态冲突
• 统一使用jQuery操作DOM，逻辑更简洁一致
• 初始化函数initPage()在页面加载时统一处理所有状态恢复，代码结构更清晰
• 密码验证时增加trim()处理，避免空格导致的验证失败
• 错误提示时自动选中输入框内容，提升用户体验

内容的提问来源于stack exchange，提问作者Thiago Vinic