如何像Android Intents一样跨页面传递Firebase获取的数据

问题背景 #

已从Firebase的Emergencies节点获取数据并渲染为列表，需要将列表选中项的对应数据传递到Maps.html页面，实现类似Android Intents的功能。

现有代码 #

HTML布局

<body>
    <div>
        <img src="./res/Logo.png" alt="App Logo" class="logo">
    </div>
    <ul id="list"> 
    </ul>
</body>

Firebase数据获取代码

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

function emergencyItemList(scenario, emergencyType) {
    var ul = document.getElementById("list");
    var li = document.createElement('li');
    var form = document.createElement('form');
    var img = document.createElement('img');
    img.src = 'Vector.jpg';
    img.alt = 'Vector Icon';
    var pScenario = document.createElement('p');
    pScenario.innerHTML = 'Scenario: ' + scenario;
    var pEmergencyType = document.createElement('p');
    pEmergencyType.innerHTML = 'Emergency Type: ' + emergencyType;
    var a = document.createElement('a');
    a.href = 'Maps.html';
    var input = document.createElement('input');
    input.className = 'btn';
    input.type = 'submit';
    input.value = 'View Emergency Location';
    a.appendChild(input);
    form.appendChild(img);
    form.appendChild(pScenario);
    form.appendChild(pEmergencyType);
    form.appendChild(a);
    li.appendChild(form);
    ul.appendChild(li);
}

function fetchAllData() {
    const dbRef = ref(db, 'Admin Users/Emergencies');
    get(dbRef).then((snapshot) => {
        if (snapshot.exists()) {
            snapshot.forEach((childSnapshot) => {
                let scenario = childSnapshot.val().Scenario;
                let emergencyType = childSnapshot.val().emergencyType;
                emergencyItemList(scenario, emergencyType);
            });
        } else {
            console.log("No data available");
        }
    }).catch((error) => {
        console.error(error);
    });
}

window.onload = fetchAllData;

Firebase数据结构

"Emergencies": {
    "ETNQlDMHTcUPwWnAWteNBdznzNu2": {
        "Scenario": "Scenario 2",
        "emergencyType": "Medical Assistance"
    }
}

解决方案 #

前端页面间传递数据有多种适配场景的实现方式，以下是三种常用方案：

方案1：URL参数传递（最直接） #

将数据编码后拼接到跳转URL的查询参数中，目标页面通过解析URL参数获取数据。

修改列表生成代码

在fetchAllData中获取Firebase节点的唯一ID（后续可用于拉取完整数据），并修改emergencyItemList函数拼接参数：

function emergencyItemList(scenario, emergencyType, itemId) {
    var ul = document.getElementById("list");
    var li = document.createElement('li');
    
    var img = document.createElement('img');
    img.src = 'Vector.jpg';
    img.alt = 'Vector Icon';
    
    var pScenario = document.createElement('p');
    pScenario.innerHTML = 'Scenario: ' + scenario;
    
    var pEmergencyType = document.createElement('p');
    pEmergencyType.innerHTML = 'Emergency Type: ' + emergencyType;
    
    var a = document.createElement('a');
    // 编码参数避免特殊字符问题
    a.href = `Maps.html?id=${encodeURIComponent(itemId)}&scenario=${encodeURIComponent(scenario)}&type=${encodeURIComponent(emergencyType)}`;
    a.className = 'btn';
    a.textContent = 'View Emergency Location';
    
    // 组装元素
    li.appendChild(img);
    li.appendChild(pScenario);
    li.appendChild(pEmergencyType);
    li.appendChild(a);
    ul.appendChild(li);
}

function fetchAllData() {
    const dbRef = ref(db, 'Admin Users/Emergencies');
    get(dbRef).then((snapshot) => {
        if (snapshot.exists()) {
            snapshot.forEach((childSnapshot) => {
                let scenario = childSnapshot.val().Scenario;
                let emergencyType = childSnapshot.val().emergencyType;
                let itemId = childSnapshot.key; // 获取Firebase节点ID
                emergencyItemList(scenario, emergencyType, itemId);
            });
        } else {
            console.log("No data available");
        }
    }).catch((error) => {
        console.error(error);
    });
}

在Maps.html中获取参数

在Maps.html的JS代码中添加参数解析逻辑：

window.onload = function() {
    const params = new URLSearchParams(window.location.search);
    const itemId = params.get('id');
    const scenario = params.get('scenario');
    const emergencyType = params.get('type');
    
    // 使用获取到的数据，比如渲染到页面
    console.log('Item ID:', itemId);
    console.log('Scenario:', scenario);
    console.log('Emergency Type:', emergencyType);
};

方案2：LocalStorage临时存储 #

将选中项数据存储到LocalStorage，跳转后在目标页面读取，适合传递复杂数据。

修改列表生成代码

function emergencyItemList(scenario, emergencyType, itemId) {
    var ul = document.getElementById("list");
    var li = document.createElement('li');
    
    var img = document.createElement('img');
    img.src = 'Vector.jpg';
    img.alt = 'Vector Icon';
    
    var pScenario = document.createElement('p');
    pScenario.innerHTML = 'Scenario: ' + scenario;
    
    var pEmergencyType = document.createElement('p');
    pEmergencyType.innerHTML = 'Emergency Type: ' + emergencyType;
    
    // 用按钮代替链接，添加点击事件
    var btn = document.createElement('button');
    btn.className = 'btn';
    btn.textContent = 'View Emergency Location';
    btn.addEventListener('click', function() {
        // 将数据转为JSON存储
        localStorage.setItem('selectedEmergency', JSON.stringify({
            id: itemId,
            scenario: scenario,
            emergencyType: emergencyType
        }));
        // 跳转页面
        window.location.href = 'Maps.html';
    });
    
    // 组装元素
    li.appendChild(img);
    li.appendChild(pScenario);
    li.appendChild(pEmergencyType);
    li.appendChild(btn);
    ul.appendChild(li);
}

// fetchAllData函数修改同方案1，传入itemId
function fetchAllData() {
    const dbRef = ref(db, 'Admin Users/Emergencies');
    get(dbRef).then((snapshot) => {
        if (snapshot.exists()) {
            snapshot.forEach((childSnapshot) => {
                let scenario = childSnapshot.val().Scenario;
                let emergencyType = childSnapshot.val().emergencyType;
                let itemId = childSnapshot.key;
                emergencyItemList(scenario, emergencyType, itemId);
            });
        } else {
            console.log("No data available");
        }
    }).catch((error) => {
        console.error(error);
    });
}

在Maps.html中读取数据

window.onload = function() {
    const emergencyData = JSON.parse(localStorage.getItem('selectedEmergency'));
    if (emergencyData) {
        console.log('Selected Emergency:', emergencyData);
        // 使用数据后建议移除，避免残留
        localStorage.removeItem('selectedEmergency');
    }
};

方案3：SessionStorage传递 #

逻辑与LocalStorage一致，但SessionStorage的数据仅在当前会话有效，关闭浏览器后自动清除，适合临时数据传递：

• 存储时替换为sessionStorage.setItem('selectedEmergency', JSON.stringify(data))
• 读取时替换为sessionStorage.getItem('selectedEmergency')

内容的提问来源于stack exchange，提问作者Rafael Campos