如何使用window.localStorage存储玩家姓名及分数并实时展示

核心修改思路 #

1. 页面初始化时从localStorage读取已存储的玩家连胜数据，无数据则初始化空对象
2. 玩家获胜更新连胜数后，立即将最新数据同步到localStorage
3. 保留原有展示逻辑，确保数据变化时实时同步更新展示内容

修改后的完整代码 #

// 从localStorage读取玩家连胜数据，无记录则初始化空对象
let wins = JSON.parse(localStorage.getItem('playerWins')) || {};

function addPhoto(data, mode) {
    // DATA
    let userName = data.uniqueId;
    let userAvatar = data.profilePictureUrl;
    let word = ['Nice going','That’s better than ever','That’s first class work'];
    let words = word[Math.floor(Math.random()*word.length)];

    if (mode == "winner") {
        // 更新当前玩家连胜数，无历史记录则从0开始
        wins[userName] = wins[userName] || 0;
        wins[userName]++;
        
        // 将更新后的连胜数据同步存储到localStorage
        localStorage.setItem('playerWins', JSON.stringify(wins));

        addContent(
                `<div style="text-align:center;font-size: .8rem;">
                    <div style='padding-bottom:.25rem;color:#1881FF;'>👏🏻👏🏻 `+ words + `</div>
                    <div style='padding-bottom:.5rem;font-weight: bold;color:#20B601;'>`+ userName + ` ❗</div>
                    <div>
                        <img src="`+ userAvatar + `" style="width:135px;height:135px;border-radius: 30%;border: 1px solid #20B601;box-shadow: 0 0 7px 1px #20B601;"/>
                        <span style='color:#EA0C0C; font-weight: bold;'>&nbsp;&nbsp;&nbsp;&nbsp;Wins: x`+ wins[userName] + `</span>
                    </div>
                </div>`
        );
    }
}

关键细节说明 #

• localStorage数据处理：localStorage仅支持存储字符串类型，因此用JSON.stringify()将连胜对象转为字符串存储，读取时通过JSON.parse()转回对象，实现复杂数据的持久化。
• 数据实时同步：每次更新连胜数后立即执行存储操作，确保页面刷新、服务器重启后，再次打开游戏能读取到历史数据。
• 展示同步：获胜逻辑中直接使用更新后的wins[userName]生成展示内容，保证界面与存储数据完全同步。

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