使用javascript实现有效时间的控制,并显示将要过期的时间

使用JavaScript实现有效时间的控制可以采用以下步骤：

1.创建一个Date对象来获取当前时间。如下所示：

const now = new Date();

2.通过加上有效时间的毫秒数（比如一小时的有效时间为3600000毫秒）来计算出存储到cookie或localstorage中的过期时间。如下所示：

const expirationTime = now.getTime() + 3600000;

3.将过期时间转换成UTC格式的字符串，以便将来读取时可以正确转换回Date对象。如下所示：

const expirationTimeUTCString = new Date(expirationTime).toUTCString();

4.将过期时间和其他需要存储的数据（比如用户登录信息）一起存储到cookie或localstorage中。如下所示：

localStorage.setItem("userInfo", JSON.stringify({
  "username": "john",
  "name": "John Smith",
  "expirationTime": expirationTimeUTCString
}));

5.在需要验证数据是否过期的地方，首先读取存储的数据并转换回对象，如下所示：

const userInfoString = localStorage.getItem("userInfo");
const userInfo = JSON.parse(userInfoString);

6.然后通过比较当前时间和过期时间来判断数据是否过期。如下所示：

const now = new Date();
const expirationTime = new Date(userInfo.expirationTime);

if (now < expirationTime) {
  // 数据未过期，可以使用
} else {
  // 数据已过期，需要重新登录或者刷新数据
}

以下为两个示例说明：

示例1：在用户登录时记录过期时间

const now = new Date();
const expirationTime = now.getTime() + 3600000;
const expirationTimeUTCString = new Date(expirationTime).toUTCString();

// 假设从后端API获取到了用户ID和用户名
const userId = "123";
const username = "john";

localStorage.setItem("userInfo", JSON.stringify({
  "userId": userId,
  "username": username,
  "expirationTime": expirationTimeUTCString
}));

示例2：在页面加载时验证数据是否过期，并提示用户刷新页面

const userInfoString = localStorage.getItem("userInfo");
const userInfo = JSON.parse(userInfoString);

const now = new Date();
const expirationTime = new Date(userInfo.expirationTime);

if (now < expirationTime) {
  // 数据未过期，可以使用
} else {
  // 数据已过期，需要重新登录或者刷新数据
  alert("数据已过期，请刷新页面！");
}