LocalStorage 值未显示在其他 html 页面中答案

【问题标题】：LocalStorage value not shown in other html pageLocalStorage 值未显示在其他 html 页面中
【发布时间】：2023-03-08 11:58:02
【问题描述】：

我有一个index.html 页面，我在localStorage 中设置userid 如下

Index.html

<div>
  <input type="text" id='user_id' required tabindex="1" name="user_id" autofocus autocomplete=off placeholder="User Name">
 </div>
 <input class="user_login_submit" type="submit"  id='btnLogin' tabindex="3" name="login_btnSubmit" tabindex='3' onclick='validateLogin();'value="LOGIN" />

<script>
function validateLogin() {
    var userid = document.getElementById('user_id').value;
    localStorage.setItem("userID", "Welcome, " + userid);
}
</script>

现在我想在navbar 即nav.html 页面中显示这个userid，请注意它只包含navbar 代码，没有任何其他标题或正文部分，

nav.html

   <li><a href="#" id="profileDDL"style="text-transform:capitalize;opactiy:0.4;font-weight:bolder">
    </a></li>
    <script> 
                   $(function() {
                    $('#profileDDL').innerHTML=localStorage.getItem("userID");
                });
       </script>

现在，我想在 user_home.html 或任何其他带有 userID 的 html 页面从 localStorage 加载这个 nav.html 页面，navbar 加载正常，但不是 localStorage 值。

user_home.html

    <body>
        <!--Navigation bar-->
        <div id="nav-placeholder">

        </div>
        <!--end of Navigation bar-->

        <script>
        $(function(){
        $("#nav-placeholder").load("nav.html");
});
</script>
    </body>

我希望你明白我的问题是什么。我被困在这里了。

【问题讨论】：

你的问题是将userid的值从一个页面传递到另一个页面？
是的，我想用导航栏在任何地方显示用户 ID
$('#profileDDL') 返回一个 jQueery 对象，它与 DOM 元素没有任何相似之处

标签： javascript html local-storage

【解决方案1】：

换行

$('#profileDDL').innerHTML=localStorage.getItem("userID");

到

$('#profileDDL').html(localStorage.getItem("userID"));

【讨论】：

... 因为 $(...) 是一个 jQueery 对象，而不是一个 DOM 元素（解释有很长的路要走）