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

我有一个应用程序，允许用户提交表单，将其保存到本地存储，然后在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>

标题：


条目：




地理定位状态
你的座标
纬度
NA
经度
NA
if（导航器.地理位置）{
navigator.geolocation.watchPosition(
功能（pos）{
$（“#状态”）。文本（“确定”）；
$（“#相关度”）.文本（位置坐标纬度）；
$（“#eLongitude”）.text（位置坐标经度）；
},
功能（err）{
$（“#状态”）.text（“错误：+err.message”）；
}
)
}
否则{
$（“#状态”）.text（“此浏览器不支持地理位置”）；
} 

表单提交时会调用一个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>");
    }
}

$（函数（）{
var selected_index=-1；//所选列表项的索引
var tableEntries=localStorage.getItem（“tableEntries”）；//检索存储的数据
tableEntries=JSON.parse（tableEntries）；//将字符串转换为对象
if（tableEntries==null）//如果没有数据，则初始化空数组
tableEntries=[]；
函数Add（）{
var writing=JSON.stringify({
标题：$（“#txtTitle”）.val（），
条目：$（“#txentry”）.val（）。
纬度：$（“#相对度”）.val（），
经度：$（“#eLongitude”）.val（）
});
tableEntries.push（书写）；
setItem（“tableEntries”，JSON.stringify（tableEntries））；
警报（“条目已保存”）；
返回true；
}
函数编辑（）{
tableEntries[selected_index]=JSON.stringify({
标题：$（“#txtTitle”）.val（），
条目：$（“#txentry”）.val（），
纬度：$（“#相对度”）.val（），
经度：$（“#eLongitude”）.val（）
});
setItem（“tableEntries”，JSON.stringify（tableEntries））；
警报（“条目已编辑。”）
operation=“A”；//返回默认值
返回true；
}
函数列表（）{
$（“#tblStorage”）.html（“”）；
$（“#tblStorage”）.html(
""+
"   "+
"   "+
“标题”+
“条目”+
“纬度”+
“经度”+
"   "+
""+
""+
""
);
for（表条目中的var i）{
var write=JSON.parse（tableEntries[i]）；
$（“#tblStorage tbody”）.append（”+
"   " + 
“”+书面标题+“”
“”+写入项+“”+
“”+写入纬度+“”+
“”+写入经度+“”+
"");
}
}

您确定您从watchPosition调用中获得了lat/lng值吗？是的，geolocation watchPosition在html中工作得非常好。JS函数不接受地理值。我研究了dd标记，但找不到确认可以使用.val（）访问它的文档函数。啊，我没有注意到您正在从dd元素中提取值。也许可以尝试将其设置为数据属性并从中提取。