如果我第二次访问应用程序，如何重定向到第二个页面

Question

我正在尝试创建一个烧瓶 Web 应用程序，如果用户第一次访问我的应用程序，他将被引导到一个 index.html 页面，在那里他将被提示输入一个名称并提交它。然后我将名称保存在本地存储中并将用户重定向到第二个 html 页面channels.html。现在如果用户关闭选项卡并第二次访问应用程序，他应该被重定向到第二页channels.html，即"/chanels"路由自动而不是第一页。

这是我目前编写的 app.py python 文件：

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/channels", methods=['GET', 'POST'])
def channels():
    if request.method == "POST":
        name = request.form.get("display_name")
        return render_template("channels.html", name=name)
    render_template("channels.html")

这是我的 index.html：

<script src="{{url_for('static', filename='index.js')}}"></script>
<h2>Enter your name!</h2>
<form action="/channels" method='Post'>
            <input id="displayname" name="display_name" placeholder="Name" autocomplete="off" autofocus required type="text"/>
            <input type="submit" id="submitbutton" onclick="store()"/>
</form>

还有 index.js：

function store(){
    var name= document.getElementById("displayname");
    localStorage.setItem("displayname", name.value);
}

我尝试用谷歌搜索如何做到这一点，但找不到解决方案。
任何帮助将不胜感激。

编辑：根据@AkibRhast 的建议，我尝试检查localStorage 是否存在，如果存在，则重定向到channels.html，因此我将以下代码添加到我的index.js 文件中：

if(localStorage.getItem("displayname")){
    window.location.replace("/channels");
}

但是现在每当我访问索引页面时，我都会收到 404 Not Found 错误，尽管 url 栏中的 url 具有指向频道的链接，即 http://127.0.0.1:5000/channels.html。

Answer 1

看来你正朝着正确的方向前进。

试试这个：

1. 在您的 index.html 中，在页面的页眉/页面顶部添加一个脚本。您希望脚本首先加载
2. 因此，当用户访问 index.html 时，脚本会检查本地 storage.getItem("displayName") 是否存在。
3. 如果有，请重定向到 channels.html

一旦您尝试过，并对您的代码进行了适当的更改，如果它不起作用，请使用您现在尝试过的内容以及任何错误的堆栈跟踪来编辑您的原始帖子。 我很高兴再次查看并修改我的答案。

更新

所以我认为它目前无法在您这边工作的原因与您的通道函数中您需要为您的第二个渲染模板有一个返回值的事实有关，如下所示：

@app.route("/channels", methods=['GET', 'POST'])
def channels():
    if request.method == "POST":
        name = request.form.get("display_name")
        return render_template("channels.html", name=name)
    return render_template("channels.html") # This line has been modified

您需要在代码中进行的另一项更改是更改您的 index.js 文件以使更改生效。只需添加此功能即可。

//This function needs to be added to index.js
window.onload = function(){
if(localStorage.getItem("displayname")){

    window.location.replace("/channels");


}

我已经实施了上述更改，它似乎按预期工作，如果这对你有用，请告诉我。另外，在另一个方面，测试它是否正常工作的最佳方法是使用隐身模式。