尝试将对象添加到存储阵列中,然后通过循环将它们写出

Trying to add objects into storage array and then write them out with the loop

本文关键字:循环 然后 对象 添加 存储阵列      更新时间:2023-09-26

im 尝试将一些"联系人"添加到本地存储中,每次添加新联系人时,我都想将其刷新到 jquery 列表中。如果我不使用本地存储,我会成功地做到这一点。但是现在我总是有一些问题,无法解决它。

例如,现在我收到此错误

捕获的类型错误:未定义不是函数

谢谢你的任何想法。

网页:

    </head>
    <body>

        <div data-role="page" data-theme="b" id="page1">
        <div data-role="header" id ="head">
            <h1></h1>            
        </div> <!--HEADER-->
        <div class="ui-content ui-body-c" role="main" align="left">
        <a href="#popupBasic" data-rel="popup" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus" data-transition="pop">Add contact</a>
        <div data-role="popup" id="popupBasic" data-theme="a">
        <p>
        <label for="uj">Name: </label>
        <input type="text" id="name"/>
        <label for="text">Phone: </label>
        <input type="text" id="tell"/>
        <a data-role="button" onClick="addContact()">add</a> 
        </p>
        </div>
        <br>
        <div id="liss">
        <ul id="listC" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
        </ul>
       </div>    
       </div> <!--CONTENT-->
        <div data-role="footer" align="center">
            <a data-role="button" onClick="clear()">Delete memmory</a>
            <a data-role="button" onClick="showThemAll()">load</a>
        </div> <!--FOOTER-->
        </div>
    </body>
</html>

.JS:

function showThemAll()
{
    if (!localStorage.contacts) { localStorage.contacts = contact; }
    else
    {
    for (i = 0; i < localStorage.contacts.length; i++) 
    { 
    $("#listC").append(localStorage.contacts[i]);
    $("#listC").listview('refresh');
    }
    }
}
function addContact()
{
    if (!localStorage.contacts) { localStorage.contacts = []; }
   var nameElement = document.getElementById("name");
   var theName = nameElement.value;
   var tellElement = document.getElementById("tell");
   var theTell = tellElement.value;  
   var name = theName;
   var tell = theTell;
   var AreYouHuman = {nam:name , tel:tell}; 
   var liss = "<li><a href='#page2'>"+AreYouHuman.nam+"</a></li>";
   localStorage.contacts.push(AreYouHuman);
    $("#listC").append(liss);
    $("#listC").listview('refresh');

}
function clear()
{
   localStorage.clear();  
}
function showThemAll()
{
  if(localStorage.contacts)
  {
    var contacts=JSON.parse(localStorage.contacts);
    for (i = 0; i < contacts.length; i++) 
   { 
     $("#listC").append(contacts[i]);
     $("#listC").listview('refresh');
   }
   }
 }
function addContact()
{
 var nameElement = document.getElementById("name");
 var theName = nameElement.value;
 var tellElement = document.getElementById("tell");
 var theTell = tellElement.value;  
 var name = theName;
 var tell = theTell;
 var contacts=(localStorage.contacts)? JSON.parse(localStorage.contacts) : [];
 var AreYouHuman = {nam:name , tel:tell}; 
 var liss = "<li><a href='#page2'>"+AreYouHuman.nam+"</a></li>";
 contacts.push(AreYouHuman);
 localStorage.contacts=JSON.stringify(contacts);
$("#listC").append(liss);
$("#listC").listview('refresh');

}