如何更新HTML脚本标记中嵌入的数据？

Question

我有一个简单的html页面，脚本标记中嵌入了Json-ld数据。

如何在提交表单时更新此数据？

以下是页面的一些代码（数据+加载功能）。我缺少的是saveData函数，它更新了脚本部分中嵌入的数据。

谢谢，

    <script id="person" type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "givenName": "Marco",
  "familyName": "Van Basten"
}
</script>
<script>
function loadData() {

  var person = document.getElementById("person").textContent;
  var jsonld = JSON.parse(person);


  document.getElementById("givenName").value = jsonld.givenName;
  document.getElementById("familyName").value = jsonld.familyName;

}

Answer 1

以下代码段仅 ，但应显示如何使用JSON.stringify使用JSON字符串更新脚本对象。

  person.innerHTML = JSON.stringify(jsonld);

使用Load加载原件。更改值，然后再次保存并加载。 使用浏览器开发人员工具来观察DOM的值。

function loadData(e) {

  var person = document.getElementById("person");
  var jsonld = JSON.parse(person.textContent);
  console.log(jsonld.givenName, jsonld);

  document.getElementById("givenName").value = jsonld.givenName;
  document.getElementById("familyName").value = jsonld.familyName;

}

function saveData(e) {
  console.log('event', e);
  var person = document.getElementById("person");
  var jsonld = JSON.parse(person.textContent);
  
  jsonld.givenName =document.getElementById("givenName").value;
  jsonld.familyName =document.getElementById("familyName").value;
  
  //person.innerHTML = JSON.stringify(jsonld);
  person.textContent = JSON.stringify(jsonld);
}

document.getElementById("saveButton").addEventListener('click', saveData);
document.getElementById("loadButton").addEventListener('click',loadData);

<script id="person" type="application/ld+json">
  { "@context": "http://schema.org", "@type": "Person", "givenName": "Marco", "familyName": "Van Basten" }
</script>
<form>
  <input type="text" id="givenName" />
  <input type="text" id="familyName" />
</form>
<button id="loadButton">Load</button>
<button id="saveButton">Save</button>