如何在localstorage中动态存储地理位置数据，检索和显示

Question

我有一个应用程序，允许用户提交表单，将其保存到本地存储，然后在html表中显示输入。用户可以更新和删除他们的数据。我的问题是表单还显示用户的地理位置，但我无法将该数据存储到本地存储中。 html文件中地理位置数据的代码如下所示;

<form id="formStorage">
                 <ul>
                    <li>
                        <label for="txtTitle">Title:</label>
                        <input type="text" id="txtTitle"/>
                    </li>
                    <li>
                        <label for="txtEntry">Entry:</label>
                        <textarea id="txtEntry"></textarea>
                    </li>
                    <li>
                        <input type="submit" value="Save" id="btnSave"/>
                    </li>   
                 </ul>


                 <dl> 
                    <dt>Geolocation Status</dt>
                    <dd id='status'>Your Coordinates</dd>

                    <dt>Latitude</dt>
                    <dd id='eLatitude'>NA</dd>

                    <dt>Longitude</dt>
                    <dd id='eLongitude'>NA</dd>
                </dl>
            </form>

            <!--  Geolocation coordinates & error message handling -->
           <script>
               if (navigator.geolocation) {
                   navigator.geolocation.watchPosition(
                        function (pos) {
                            $("#status").text("OK");
                            $("#eLatitude").text(pos.coords.latitude);
                            $("#eLongitude").text(pos.coords.longitude);
                        },
                        function (err) {
                            $("#status").text("ERROR: "+ err.message);      
                        }
                   )
               }
               else {
                   $("#status").text("Geolocation is not supported in this browser");
               } 
           </script> 


<table id="tblStorage">

</table>

在运行添加，编辑，删除和列表功能的表单提交上调用了一个javascript文件，该函数动态填充表标记。这些函数适用于表单输入变量，但不适用于地理位置数据变量。我尝试了多次迭代。有人能告诉我缺少什么吗？

            $(function(){

var selected_index = -1; //Index of the selected list item

var tableEntries = localStorage.getItem("tableEntries");//Retrieve the stored data

tableEntries = JSON.parse(tableEntries); //Converts string to object

if(tableEntries == null) //If there is no data, initialize an empty array
    tableEntries = [];

function Add(){
    var writing = JSON.stringify({
        Title    : $("#txtTitle").val(),
        Entry  : $("#txtEntry").val().
        Latitude : $("#eLatitude").val(),
        Longitude: $("#eLongitude").val()
    });
    tableEntries.push(writing);
    localStorage.setItem("tableEntries", JSON.stringify(tableEntries));
    alert("The entry was saved.");
    return true;
}

function Edit(){
    tableEntries[selected_index] = JSON.stringify({
            Title    : $("#txtTitle").val(),
            Entry  : $("#txtEntry").val(),
            Latitude : $("#eLatitude").val(),
            Longitude: $("#eLongitude").val()
        });
    localStorage.setItem("tableEntries", JSON.stringify(tableEntries));
    alert("The entry was edited.")
    operation = "A"; //Return to default value
    return true;
}


function List(){        
    $("#tblStorage").html("");
    $("#tblStorage").html(
        "<thead>"+
        "   <tr>"+
        "   <th></th>"+
        "   <th>Title</th>"+
        "   <th>Entry</th>"+
        "   <th>Latitude</th>"+
        "   <th>Longitude</th>"+
        "   </tr>"+
        "</thead>"+
        "<tbody>"+
        "</tbody>"
        );
    for(var i in tableEntries){
        var writ = JSON.parse(tableEntries[i]);
        $("#tblStorage tbody").append("<tr>"+
                            "   <td><img src='edit.png' alt='Edit"+i+"' class='btnEdit'/><img src='delete.png' alt='Delete"+i+"' class='btnDelete'/></td>" + 
                            "   <td>"+writ.Title+"</td>" + 
                            "   <td>"+writ.Entry+"</td>" + 
                            "   <td>"+writ.Latitude+"</td>" + 
                            "   <td>"+writ.Longitude+"</td>" + 
                            "</tr>");
    }
}