js 全局变量 页面刷新

在JavaScript中，全局变量是在所有函数外部定义的变量，可以在程序的任何位置访问，包括函数内部。当页面刷新时，全局变量的值会丢失，因为浏览器会重新加载JavaScript环境，全局变量会被重新初始化。

基础概念

全局变量：在函数外部声明的变量，或者不使用var、let、const关键字直接赋值的变量（在非严格模式下），会成为全局对象的属性（在浏览器中通常是window对象）。

相关优势

• 方便访问：可以在代码的任何地方访问，无需传递参数。
• 状态保持（在页面不刷新的情况下）：可以在多个函数间共享数据。

类型

• 显式全局变量：通过var、let、const在函数外部声明的变量。
• 隐式全局变量：在函数内部不使用var、let、const关键字直接赋值的变量。

应用场景

• 配置信息：存储应用的配置信息，如API端点。
• 共享数据：在多个函数间共享数据，如用户登录状态。

页面刷新问题

当页面刷新时，全局变量会丢失其值，因为整个JavaScript环境被重置。如果需要在页面刷新后保持某些数据，可以考虑以下方法：

1. 使用localStorage或sessionStorage

// 设置数据
localStorage.setItem('myData', JSON.stringify(myGlobalVariable));

// 页面加载时获取数据
window.onload = function() {
    const myGlobalVariable = JSON.parse(localStorage.getItem('myData'));
    // 使用myGlobalVariable
};

2. 使用URL参数

将数据编码到URL中，但这通常适用于小量数据。

3. 使用Cookies

设置一个过期时间，以便即使在关闭浏览器后也能保留数据。

// 设置cookie
document.cookie = "myData=" + encodeURIComponent(myGlobalVariable) + "; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT";

// 读取cookie
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return decodeURIComponent(parts.pop().split(';').shift());
}

window.onload = function() {
    const myGlobalVariable = getCookie('myData');
    // 使用myGlobalVariable
};

4. 使用服务器端存储

如果数据需要在多个会话间保持，可以将其存储在服务器端，并在页面加载时通过AJAX请求获取。

解决问题的方法

如果全局变量在页面刷新后需要保持，可以根据数据的持久性需求和安全性考虑，选择上述方法之一或结合使用。例如，对于敏感数据，应避免使用localStorage，而应使用服务器端存储和安全的传输协议。

选择合适的方法时，还需要考虑数据的大小、访问频率、是否需要跨设备同步等因素。