如何利用localStorage实现登录成功后始终显示指定div并隐藏登录控件？

完全可以通过localStorage实现这个需求，核心思路是用localStorage存储登录状态，页面每次加载时读取该状态来控制元素的显示与隐藏。以下是具体的实现方案：

关键逻辑步骤 #

• 登录成功后，将登录状态存入localStorage（持久化存储，除非主动清除或浏览器数据被删除）
• 页面初始化时，检查localStorage中的登录状态，已登录则直接显示目标内容、隐藏登录组件
• 登录验证通过后，立即更新页面显示状态并持久化登录信息

修改后的完整代码 #

HTML部分

<div id="login-container">
  <input type="password" id="password-input" placeholder="输入密码">
  <button id="login-btn">登录</button>
</div>
<div id="content" style="display: none;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

JavaScript部分

// 获取DOM元素
const loginContainer = document.getElementById('login-container');
const passwordInput = document.getElementById('password-input');
const loginBtn = document.getElementById('login-btn');
const contentDiv = document.getElementById('content');

// 页面加载时检查登录状态
window.addEventListener('load', checkLoginStatus);

// 检查登录状态函数
function checkLoginStatus() {
  const isLoggedIn = localStorage.getItem('isLoggedIn');
  if (isLoggedIn === 'true') {
    showContent();
  }
}

// 显示内容、隐藏登录组件
function showContent() {
  loginContainer.style.display = 'none';
  contentDiv.style.display = 'block';
}

// 登录按钮点击事件
loginBtn.addEventListener('click', () => {
  const password = passwordInput.value.trim();
  // 验证密码（示例密码为12345）
  if (password === '12345') {
    // 持久化登录状态
    localStorage.setItem('isLoggedIn', 'true');
    showContent();
  } else {
    alert('密码错误，请重新输入');
  }
});

// 可选：添加退出功能（若需要）
// contentDiv.innerHTML += '<button id="logout-btn" style="margin-top:10px;">退出登录</button>';
// document.getElementById('logout-btn').addEventListener('click', () => {
//   localStorage.removeItem('isLoggedIn');
//   loginContainer.style.display = 'block';
//   contentDiv.style.display = 'none';
//   passwordInput.value = '';
// });

代码说明 #

1. 页面初始化检查：通过window.load事件触发状态检查，确保页面一加载就根据登录状态渲染对应内容
2. 登录状态持久化：用localStorage.setItem存储isLoggedIn为'true'，该数据会一直保留在浏览器中
3. DOM控制：showContent函数统一处理元素显示隐藏逻辑，避免重复代码
4. 密码验证：简单的字符串匹配验证密码，实际项目中建议结合后端接口做安全验证

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