JavaScript会话值存储：匹配指定URL存凭据 浏览器重启后可读取

实现思路 #

• 首先通过 window.location.href 检测当前访问URL是否包含指定字符串-post-update
• 符合条件时采集目标凭据信息，使用浏览器内置的 localStorage 做持久化存储（关闭浏览器后数据不会自动清除，同域名下可跨页面、跨会话读取）
• 页面初始化时优先读取localStorage中存储的凭据，实现二次访问自动取回

完整可运行代码 #

// 页面加载完成后执行逻辑
window.addEventListener('load', () => {
  // 1. 优先读取已存储的凭据
  const savedCredentials = localStorage.getItem('site_credentials');
  if (savedCredentials) {
    // 此处可替换为自身业务逻辑，比如直接填充到表单、传给后端等
    const credentials = JSON.parse(savedCredentials);
    console.log('读取到已保存的凭据：', credentials);
  }

  // 2. 检测URL是否包含指定字符串
  const targetStr = '-post-update';
  if (window.location.href.includes(targetStr)) {
    // 此处替换为实际需要采集的凭据信息，比如表单输入、登录态、用户信息等
    const currentCredentials = {
      username: document.querySelector('#username')?.value || '',
      auth_token: document.querySelector('meta[name="auth-token"]')?.content || '',
      // 其他需要采集的字段自行补充
    };

    // 凭据存入localStorage，注意要转成JSON字符串存储
    localStorage.setItem('site_credentials', JSON.stringify(currentCredentials));
    console.log('凭据已保存：', currentCredentials);
  }
});

注意事项 #

• localStorage 仅支持存储字符串类型，非字符串数据需要用 JSON.stringify 序列化后存储，读取时用 JSON.parse 反序列化
• 不要在localStorage中明文存储密码、身份证号等高度敏感信息，如有需要请先做对称加密处理
• localStorage 是同域名隔离的，跨域名无法读取对应存储数据，符合常规站点的安全需求
• 如果需要设置凭据的过期时间，可以在存储时额外加一个时间戳字段，读取时判断是否超过有效期，超过则清除存储内容

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