为什么我得到 [object HTMLParagraphElement] 的变量值（地理位置）

【问题标题】：Why did I get [object HTMLParagraphElement] for value of variable(geolocation)为什么我得到 [object HTMLParagraphElement] 的变量值（地理位置）
【发布时间】：2022-02-04 13:27:59
【问题描述】：

这是获取用户坐标并将坐标保存在本地存储中的代码，但它显示 [object HTML Paragraph Element] 作为存储值如果我可以将其保存为数值，则很容易导出我是新手请帮我解决这个问题

var x = document.getElementById("demo");
var k = document.getElementById("demon");

localStorage.setItem("cor",k);

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
      } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";

  }
}

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
 k.innerHTML =position.coords.latitude
   
}

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>
<p id="demon"></p>

</body>
</html>

【问题讨论】：

标签： javascript html geolocation local-storage

【解决方案1】：

LocalStorage 仅将项目存储为字符串值。所以

localStorage.setItem("cor",k);

在浏览器中将k（HTMLParagraphElement）转换为字符串“[object HTML Paragraph Element]”，并将其保存为“cor”项。

要保存坐标，请尝试将它们转换为 JSON 字符串，在 showPosition 回调中获取它们之后，通过调用 JSON.stringify 并使用坐标对象作为参数：

function showPosition(position) {
  const {latitude, longitude} = position.coords;
  // save in local storage:
  localStorage.setItem("cor",JSON.stringify({latitude, longitude});
  // as posted:
  x.innerHTML = "Latitude: " + latitude + 
  "<br>Longitude: " + longitude;
  k.innerHTML =position.coords.latitude
   
}

要再次读取坐标，请将getItem("cor") 的字符串值传递给JSON.parse 以重新创建{latitude, longitude} 对象。

【讨论】：