Identity Server 4登录Razor页面无法加载JavaScript文件及使用LocalStorage存储数据的问题

1. 修复JavaScript文件加载失败问题 #

ASP.NET Core默认只允许访问wwwroot目录下的静态文件，你的StayLogged.js放在Views/Account目录下是无法直接通过浏览器访问的，这是导致文件加载失败的核心原因。

解决步骤：

• 把StayLogged.js移动到wwwroot/js目录下（如果没有js文件夹就新建一个）
• 在Razor页面的scripts区块里修改引用路径，使用根路径符号~来定位：

  @section scripts {
    <script src="~/js/StayLogged.js" type="text/javascript"></script>
  }
  

2. 修正LocalStorage存储的代码错误 #

你的JS代码有两个关键问题：

• 没有使用正确的localStorage全局对象，而是用了未定义的storage
• 错误获取了checkbox的value属性（checkbox的value默认始终是on），应该获取checked状态

修改后的StayLogged.js代码：

// 监听checkbox的change事件更准确，点击label或checkbox本身都会触发
document.getElementById("RememberLogin").addEventListener("change", saveToLocal);

function saveToLocal() {
  // 获取checkbox的选中状态（布尔值）
  const isChecked = document.getElementById("RememberLogin").checked;
  console.log("记住登录状态：", isChecked);
  // 用localStorage存储，注意布尔值要转成字符串，因为LocalStorage只能存字符串
  localStorage.setItem("RememberLogin", isChecked.toString());
}

3. 解决内联脚本的安全错误问题 #

你提到内嵌脚本触发安全错误，这是因为Identity Server 4默认启用了严格的内容安全策略(CSP)，禁止内联脚本执行。优先推荐使用外部脚本（就是上面第一步修复后的方式），如果一定要用内联脚本，需要在CSP中添加允许规则：

方式一：推荐使用外部脚本（更安全） #

按照第一步和第二步的方式调整JS文件位置和代码，不需要内嵌脚本，规避CSP限制。

方式二：调整CSP设置（如果必须用内联） #

在Identity Server的配置中修改CSP，允许内联脚本。比如在Startup.cs（或Program.cs，取决于.NET版本）的ConfigureServices方法中添加：

services.AddIdentityServer(options =>
{
    options.CspOptions = new CspOptions
    {
        // 允许内联脚本，注意这会降低安全性，谨慎使用
        ScriptSrc = "'self' 'unsafe-inline'"
    };
})
// 其他配置...

4. 额外优化：页面加载时读取LocalStorage状态 #

如果需要在页面加载时恢复之前的"记住登录"状态，可以在JS中添加初始化逻辑：

// 页面加载时读取LocalStorage并设置checkbox状态
window.addEventListener("load", () => {
  const savedState = localStorage.getItem("RememberLogin");
  if (savedState === "true") {
    document.getElementById("RememberLogin").checked = true;
  }
});

这样用户下次访问登录页时，checkbox会自动保持之前的选中状态。

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