资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

User Info

创作时间:

作者:

@小白创作中心

User Info

引用

来源

https://docs.pingcode.com/baike/3717036

使用JavaScript保存登录用户并显示出来，可以通过以下几种方式：localStorage、sessionStorage、Cookies。本文将详细介绍这三种方法，并重点讲解如何使用localStorage来实现这一功能。

一、localStorage保存用户信息

localStorage是一种持久化存储，存储的数据不会过期。即使关闭浏览器或重新启动计算机，数据仍然存在。

1、保存用户信息到localStorage

要保存用户信息到localStorage，可以使用localStorage.setItem()方法。假设用户信息包含用户名和用户ID，可以这样保存：

let user = {
  username: 'JohnDoe',
  userId: '12345'
};
// 将用户信息转换为JSON字符串并保存到localStorage
localStorage.setItem('currentUser', JSON.stringify(user));

2、从localStorage中获取用户信息

从localStorage中获取用户信息，可以使用localStorage.getItem()方法：

// 从localStorage中获取用户信息并解析为对象
let storedUser = localStorage.getItem('currentUser');
if (storedUser) {
  let user = JSON.parse(storedUser);
  console.log(`Username: ${user.username}, UserID: ${user.userId}`);
} else {
  console.log('No user is currently logged in.');
}

3、显示用户信息

可以将获取到的用户信息显示在网页上，例如在一个欢迎消息中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>User Info</title>
</head>
<body>
  <div id="welcome-message"></div>
  <script>
    let storedUser = localStorage.getItem('currentUser');
    if (storedUser) {
      let user = JSON.parse(storedUser);
      document.getElementById('welcome-message').innerText = `Welcome, ${user.username}!`;
    } else {
      document.getElementById('welcome-message').innerText = 'No user is currently logged in.';
    }
  </script>
</body>
</html>

二、sessionStorage保存用户信息

sessionStorage与localStorage类似，但它的存储是会话级别的，当会话结束（例如关闭浏览器标签页）时，数据会被清除。

1、保存用户信息到sessionStorage

let user = {
  username: 'JaneDoe',
  userId: '67890'
};
sessionStorage.setItem('currentUser', JSON.stringify(user));

2、从sessionStorage中获取用户信息

let storedUser = sessionStorage.getItem('currentUser');
if (storedUser) {
  let user = JSON.parse(storedUser);
  console.log(`Username: ${user.username}, UserID: ${user.userId}`);
} else {
  console.log('No user is currently logged in.');
}

3、显示用户信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>User Info</title>
</head>
<body>
  <div id="welcome-message"></div>
  <script>
    let storedUser = sessionStorage.getItem('currentUser');
    if (storedUser) {
      let user = JSON.parse(storedUser);
      document.getElementById('welcome-message').innerText = `Welcome, ${user.username}!`;
    } else {
      document.getElementById('welcome-message').innerText = 'No user is currently logged in.';
    }
  </script>
</body>
</html>

三、使用Cookies保存用户信息

Cookies也是一种存储数据的方式，可以设置过期时间，数据会在过期时间到达后自动删除。

1、保存用户信息到Cookies

function setCookie(name, value, days) {
  let expires = "";
  if (days) {
    let date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
let user = {
  username: 'SamSmith',
  userId: '11223'
};
setCookie('currentUser', JSON.stringify(user), 7); // cookie will expire in 7 days

2、从Cookies中获取用户信息

function getCookie(name) {
  let nameEQ = name + "=";
  let ca = document.cookie.split(';');
  for(let i=0;i < ca.length;i++) {
    let c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
let storedUser = getCookie('currentUser');
if (storedUser) {
  let user = JSON.parse(storedUser);
  console.log(`Username: ${user.username}, UserID: ${user.userId}`);
} else {
  console.log('No user is currently logged in.');
}

3、显示用户信息

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>User Info</title>
</head>
<body>
  <div id="welcome-message"></div>
  <script>
    function getCookie(name) {
      let nameEQ = name + "=";
      let ca = document.cookie.split(';');
      for(let i=0;i < ca.length;i++) {
        let c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
      }
      return null;
    }
    let storedUser = getCookie('currentUser');
    if (storedUser) {
      let user = JSON.parse(storedUser);
      document.getElementById('welcome-message').innerText = `Welcome, ${user.username}!`;
    } else {
      document.getElementById('welcome-message').innerText = 'No user is currently logged in.';
    }
  </script>
</body>
</html>

四、用户信息的安全性

在保存用户信息时，安全性是一个重要的考虑因素。以下是一些建议：

不要存储敏感信息：不要在客户端存储敏感信息，如密码、信用卡号等。
数据加密：在存储数据之前，可以对数据进行加密处理。
使用HTTPS：确保数据在传输过程中是加密的，防止被窃听。

五、用户信息的管理

在实际项目中，推荐使用专业的项目管理系统来管理用户信息和其他项目相关的数据。例如：

研发项目管理系统PingCode：适用于研发团队，提供全面的项目管理功能。
通用项目协作软件Worktile：适用于各种类型的团队，提供灵活的项目协作功能。

这两个系统都可以帮助团队高效管理项目和用户信息，提升工作效率。

六、总结

本文详细介绍了如何使用JavaScript保存登录用户并显示出来的三种方法：localStorage、sessionStorage和Cookies。localStorage适用于需要持久化存储的数据，sessionStorage适用于会话级别的数据存储，Cookies则可以设置过期时间。根据不同的需求选择合适的存储方式，并注意数据的安全性。在实际项目中，使用专业的项目管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile，可以帮助团队高效管理项目和用户信息。

热门推荐

西瓜子：减肥零食的双刃剑