JavaScript 函数内修改全局变量后怎样让其他页面也能生效

在 JavaScript 开发中，有时我们会遇到在函数内修改全局变量，并且希望这个修改在其他页面也能生效的需求。这在一些多页面应用或者需要跨页面传递信息的场景下十分常见。那么，该如何实现呢？

要明确 JavaScript 中全局变量的作用域。全局变量定义在所有函数外部，可以在整个脚本文件中访问。但默认情况下，不同页面之间是相互独立的执行环境，一个页面中的变量无法直接影响到其他页面。

一种常见的解决方案是使用浏览器的本地存储（localStorage）或会话存储（sessionStorage）。这两种存储方式允许我们在浏览器中存储数据，并且可以在不同页面中访问。当在函数内修改全局变量后，可以将这个变量的值存储到本地存储或会话存储中。例如：

function modifyGlobalVariable() {
    let globalVariable = '新的值';
    localStorage.setItem('globalVariable', globalVariable);
}

然后在其他页面中，通过读取本地存储的值来更新全局变量。比如：

window.onload = function() {
    let globalVariable = localStorage.getItem('globalVariable');
    // 在这里使用更新后的全局变量
};

本地存储的优点是数据会一直存储在浏览器中，除非手动清除，适合长期保存的数据。而会话存储的数据在浏览器关闭后就会被清除，适用于临时数据。

另一种方法是使用 Cookie。Cookie 也是在浏览器端存储数据的机制，不过它会随 HTTP 请求一起发送到服务器端。在函数内修改全局变量后，可以将其值设置为一个 Cookie：

function setCookie(name, value) {
    document.cookie = name + '=' + value + '; path=/';
}
function modifyGlobalVariable() {
    let globalVariable = '新的值';
    setCookie('globalVariable', globalVariable);
}

在其他页面中读取 Cookie 来获取更新后的值：

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;
}
window.onload = function() {
    let globalVariable = getCookie('globalVariable');
    // 使用更新后的全局变量
};

通过这些方法，我们就能在 JavaScript 函数内修改全局变量后，让修改在其他页面也能生效，满足项目中跨页面数据共享的需求。