尝试将对象添加到存储阵列中,然后使用循环将其写出

时间:2015-03-13 18:12:37

标签: javascript jquery html5

我试图在localstorage中添加一些“联系人”,每次我添加新的联系人我想将其刷新到jquery列表中。如果我不使用localstorage,我会成功地做到这一点。但现在我总是有一些问题,无法解决它。

例如现在我收到此错误

  

未捕获的TypeError:undefined不是函数

谢谢你的任何想法。

HTML PAGE:                                                                                                                                                 

    </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();  
}

1 个答案:

答案 0 :(得分:0)

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');

}