注入提示语在某页面上，前端判断是否首次登陆并显示对应提示语

Question

private injection() { 
     let hintHook = `
        const hasVisited = localStorage.getItem('hasVisited') !== null;
        const hintWidget = document.createElement('div');
        const hintText = document.createElement('p');
        hintText.id = 'hintTextDiv';
        if (!hasVisited) {
            hintText.textContent = '首次';
        } else {
            hintText.textContent = '二次';
        }
      hintWidget.appendChild(hintText);
        document.body.appendChild(hintWidget);
        localStorage.setItem('hasVisited', 'true');`;

this channelWindow = new BrowserWindow({ width: 800, height: 600 })
        this.channelWindow.webContents.on('did-finish-load', () => {
            this.channelWindow?.webContents.executeJavaScript(hintHook,  true);}
}

这是注入盒子在某页面里来当做提示语，用来提示是否首次登录。打开登录页后提示语会显示'首次'，但是加载跳转后会变成'二次'，应该加载页面重新获取hasVisited再判断导致的吧，'二次'的提示语要在非首次登录提示的，要怎么解决呢

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

问题描述中指出，在Electron应用中，通过JavaScript注入的方式在页面上显示提示语，但存在一个问题：在页面首次加载时提示语正确显示为“首次”，但在页面跳转后，提示语错误地变成了“二次”。这可能是因为在页面跳转时，localStorage中的hasVisited状态没有被正确地重新检查。

要解决这个问题，你需要确保在每次页面加载完成后都重新检查localStorage中的hasVisited状态，并根据这个状态来更新提示语。以下是修改后的代码示例：

private injection() {
    let hintHook = `
        const updateHintText = () => {
            const hasVisited = localStorage.getItem('hasVisited') !== null;
            const hintTextDiv = document.getElementById('hintTextDiv');
            if (hintTextDiv) {
                if (!hasVisited) {
                    hintTextDiv.textContent = '首次';
                } else {
                    hintTextDiv.textContent = '二次';
                }
            }
        };

        const hintWidget = document.createElement('div');
        const hintText = document.createElement('p');
        hintText.id = 'hintTextDiv';
        hintText.textContent = '首次'; // 默认显示首次
        hintWidget.appendChild(hintText);
        document.body.appendChild(hintWidget);

        // 更新提示语
        updateHintText();

        // 监听页面跳转事件，重新更新提示语
        window.addEventListener('load', updateHintText);
    `;

    this.channelWindow.webContents.on('did-finish-load', () => {
        this.channelWindow.webContents.executeJavaScript(hintHook, true);
    });
}

在这个修改后的代码中，我们首先定义了一个updateHintText函数，该函数会检查localStorage中的hasVisited状态，并更新页面上的提示语。然后，我们在页面加载时创建提示语元素，并将其默认文本设置为“首次”。接着，我们使用addEventListener监听window的load事件，这样无论何时页面加载完成，都会调用updateHintText函数来更新提示语。

参考资料：

1. Electron - webContents.executeJavaScript
2. MDN - localStorage
3. MDN - EventTarget.addEventListener

请注意，上述代码示例假设你使用的是TypeScript，并且this.channelWindow是一个有效的Electron窗口引用。如果你的实现细节有所不同，请根据实际情况调整代码。