如何在javascript中基于条件呈现模板

如何呈现基于javascript条件语句的模板，即

<script type="text/javascript">
    if(localStorage.getItem("signedIn")=="True"){
        {% include 'shared/headers/simple-header.html' %}
    }else{
        {% include 'shared/headers/loggedin-header.html' %}
    }
</script>

if（localStorage.getItem（“signedIn”）=“True”）{
{%include'shared/headers/simple header.html%}
}否则{
{%include'shared/headers/loggedin header.html%}
}

上面的代码不起作用，它在javascript控制台中给了我错误

---

什么是最佳实践，请提前感谢。

在javascript之前执行

{%}

模板魔术。因此，您实际上是在向javascript中注入html代码<代码>{%%}在服务器（服务器端）上完成，并发送到模板。Javascript在收到模板后在浏览器（客户端）中完成

这有点老套，但避开了时间问题：

<div id="simpleHeader" style="display:none;">
    {% include 'shared/headers/simple-header.html' %}
</div>
<div id="loggedInHeader" style="display:none;">
    {% include 'shared/headers/loggedin-header.html' %}
</div>

<script>
    if(localStorage.getItem("signedIn")=="True"){  // if string "True", no quotes if Boolean True
        document.getElementById("loggedInHeader").style.display = "block";
    }else{
        document.getElementById("simpleHeader").style.display = "block";
    }
</script>

{%include'shared/headers/simple header.html%}
{%include'shared/headers/loggedin header.html%}
如果（localStorage.getItem（“signedIn”）==“True”）{//如果字符串为“True”，则布尔值为True时不带引号
document.getElementById（“loggedInHeader”）.style.display=“block”；
}否则{
document.getElementById（“simpleHeader”）.style.display=“block”；
}

---

最好检查服务器端的登录。

在javascript之前执行

{%}

模板魔术。因此，您实际上是在向javascript中注入html代码<代码>{%%}在服务器（服务器端）上完成，并发送到模板。Javascript在收到模板后在浏览器（客户端）中完成

这有点老套，但避开了时间问题：

<div id="simpleHeader" style="display:none;">
    {% include 'shared/headers/simple-header.html' %}
</div>
<div id="loggedInHeader" style="display:none;">
    {% include 'shared/headers/loggedin-header.html' %}
</div>

<script>
    if(localStorage.getItem("signedIn")=="True"){  // if string "True", no quotes if Boolean True
        document.getElementById("loggedInHeader").style.display = "block";
    }else{
        document.getElementById("simpleHeader").style.display = "block";
    }
</script>

{%include'shared/headers/simple header.html%}
{%include'shared/headers/loggedin header.html%}
如果（localStorage.getItem（“signedIn”）==“True”）{//如果字符串为“True”，则布尔值为True时不带引号
document.getElementById（“loggedInHeader”）.style.display=“block”；
}否则{
document.getElementById（“simpleHeader”）.style.display=“block”；
}

---

最好检查服务器端的登录。

我也尝试过javascript的document.write功能，但结果还是一样！模板发生在服务器端。Javascript发生在客户端。这就是它不起作用的原因。不，webapp2和googleappengine-python

{%}

模板魔术在javascript之前执行。因此，您实际上是在将html代码注入到javascript中。是的，@GAEfan是正确的。{%}构建页面，javascript仅在构建页面后激发。我认为在呈现页面之前，您无法访问localStorage数据。我也尝试了javascript的document.write功能，但结果保持不变！模板发生在服务器端。Javascript发生在客户端。这就是它不起作用的原因。不，webapp2和googleappengine-python

{%}

模板魔术在javascript之前执行。因此，您实际上是在将html代码注入到javascript中。是的，@GAEfan是正确的。{%}构建页面，javascript仅在构建页面后激发。我认为在呈现页面之前，您无法访问localStorage数据。这永远不会成为条件的真实部分，但当我通过发出警报来检查“signedIn”的值时，它会说：True可能是布尔值，而不是字符串：

if（localStorage.getItem（“signedIn”）==True）{

很抱歉，我在本地存储中得到了它，它实际上是“True”。这永远不会成为条件的真实部分，但当我通过发出警报来检查“signedIn”的值时，它会说：True可能是布尔值，而不是字符串：

if（localStorage.getItem（“signedIn”）==True）{

很抱歉，我在本地存储中得到了它，实际上它是“真的”。