清空local storage之后页面不会发生跳转的问题aspect

methods: {
                //退出
                logout() {
                    // 清空前面的登录状态
                    localStorage.removeItem(Access_xuejiaao)
                     // 回到登录页
                    location.href="login.html"
                },
                modfiyPass() {

                }
            }

这是前端一个登录模块的退出方法，退出首先会调用方法自动来清空之前存在的登录状态，然后跳转到login.html页面下。

但是这里出现一个问题就是我现在登录成功，然后在谷歌的开发者工具中人为手动删除Application选项下的Local Storage

在删除之后刷新页面

这里注意html 文件是通过浏览器的 http 或 https 协议访问的，而不是直接从文件系统打开的（例如 file:///）。例如，如果你在本地通过 http://localhost:8080/index.html 访问 index.html，那么路径 login.html 就会被解析为 http://localhost:8080/login.html。

但是这里是使用文件系统打开的，所以就会出现这种情况。

为什么使用 file:/// 会导致问题？

当你使用 file:/// 协议直接从文件系统打开 HTML 文件时，浏览器会有以下限制：

跨文件访问限制：

直接在 file:/// 协议下访问其他文件会受到浏览器的限制，可能会导致路径解析问题和访问受限。

基于安全的策略：

浏览器通常会阻止 JavaScript 代码从 file:/// 协议访问其他文件以防止潜在的安全问题。

解决方案：

为了避免这些问题，你应该在本地开发时使用一个本地服务器来访问你的文件。这样可以通过 http:// 或 https:// 协议进行访问，模拟实际的服务器环境。

可以使用

npm install -g http-server

http-server -p 8080

来解决，但是我更推荐使用下面的方法

在vscode中下载扩展live server

下载完成之后在你需要打开的html文件下鼠标右击

然后选择选项Open with Live Server

然后进行上面实行的操作就可以解决了

为了方便的使用开发者工具，需要使用Google浏览器默认打开，在live server 的settings修改成以下模式

{
    "files.autoSave": "afterDelay",
    "C_Cpp.default.compilerPath": "D:\\mingw64\\bin\\gcc.exe",
    "cmake.configureOnOpen": true,
    "redhat.telemetry.enabled": true,
    "editor.unicodeHighlight.allowedCharacters": {
        " ": true
    },
    "Lingma.localMachineModel": true,
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
    "liveServer.settings.CustomBrowser": "chrome"

}

其实也就是在原有的基础上添加了语句"liveServer.settings.CustomBrowser": "chrome"，这里需要注意的在上一条语句后面填加  ,   不然会报错。

傻瓜式找Live Server 的settings

点击在setting.json中编辑