Local Storage无登录状态页面跳转及登出按钮开发（Blogger环境）

1. 未登录状态自动跳转 #

在页面初始化时检查登录状态，若未登录则直接跳转至登录页面。修改你的cheklog函数，补充未登录时的跳转逻辑：

function cheklog() {
  var login = localStorage.getItem("login");
  if (login != null && login == "true") {
    document.querySelector(".wendyloginwrap").classList.add("hidden");
  } else {
    // 替换为你的登录页实际路径
    window.location.href = "login.html";
  }
}

为避免DOM未加载完成导致的错误，建议将检查逻辑放在DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
  cheklog();
});

2. 实现登出功能 #

第一步：添加登出按钮到HTML #

在已登录可见的区域（比如#login-true容器内）插入按钮：

<div id="login-true" class="hidden">
  <!-- 现有已登录内容 -->
  <button onclick="logout()">登出</button>
</div>

第二步：编写登出函数 #

在你的JavaScript代码中添加以下函数：

function logout() {
  // 清除localStorage中的登录状态
  localStorage.removeItem("login");
  // 跳转回登录页面或刷新当前页
  window.location.href = "login.html";
}

修改后的完整代码 #

var storeS = localStorage.getItem("users");
if (storeS == null) {
  var users = [{
    username: "test",
    password: "1234"
  }];
  localStorage.setItem("users", JSON.stringify(users));
}

function getUserUsername(username) {
  return JSON.parse(localStorage.getItem('users')).filter(user => user.username === username)
}

function cheklog() {
  var login = localStorage.getItem("login");
  if (login != null && login == "true") {
    document.querySelector(".wendyloginwrap").classList.add("hidden");
  } else {
    window.location.href = "login.html";
  }
}

document.addEventListener('DOMContentLoaded', function() {
  cheklog();
});

function startlog() {
  var username = document.querySelector("#username").value;
  var password = document.querySelector("#password").value;

  if (getUserUsername(username.trim()).length > 0) {
    var user = getUserUsername(username.trim())[0];
    if (user.password == password.trim()) {
      document.querySelector("#login-area").classList.add("hidden");
      document.querySelector("#login-true").classList.remove("hidden");
      localStorage.setItem("login", "true");
      setTimeout(function() {
        window.location.href = "#"; // 可替换为登录后跳转的目标页面
      }, 2000);
    } else {
      document.querySelector("#akses").innerHTML = "用户名或密码错误！";
    }
  } else {
    document.querySelector("#akses").innerHTML = "未找到该用户名";
  }
}

const show = () => {
  var password = document.querySelector("#password");
  var sandi = document.querySelector(".icon1");
  var sandidua = document.querySelector(".icon2");
  if (password.type === "password") {
    password.type = "text";
    sandidua.style.opacity = "1";
    sandi.style.opacity = "0";
  } else {
    password.type = "password";
    sandidua.style.opacity = "0";
    sandi.style.opacity = "1";
  }
}

function logout() {
  localStorage.removeItem("login");
  window.location.href = "login.html";
}

内容的提问来源于stack exchange，提问作者Mayron Guedes