html 保存数据到本地JSON文件

要将数据保存到本地JSON文件，需要使用JavaScript和HTML5的File API。以下是一个简单的示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<title>Save Data to Local JSON File</title>
	<script src="saveData.js"></script>
</head>
<body>
	<h1>Save Data to Local JSON File</h1>
	<form>
		<label for="name">Name:</label>
		<input type="text" id="name" name="name"><br><br>
		<label for="email">Email:</label>
		<input type="email" id="email" name="email"><br><br>
		<button type="button" onclick="saveData()">Save Data</button>
	</form>
</body>
</html>

JavaScript代码（保存为saveData.js）：

function saveData() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var data = { name: name, email: email };
  var jsonData = JSON.stringify(data);
  var file = new Blob([jsonData], {type: 'application/json'});
  var a = document.createElement("a");
  var url = URL.createObjectURL(file);
  a.href = url;
  a.download = "data.json";
  document.body.appendChild(a);
  a.click();
  setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);  
  }, 0); 
}

此代码将获取HTML表单中的名称和电子邮件，并将其存储在JSON对象中。然后，使用JSON.stringify将JSON对象转换为字符串。接下来，将字符串转换为Blob对象，并使用File API中的URL.createObjectURL方法创建URL。最后，创建一个链接元素并将其附加到文档中。将URL设置为链接的href属性，并将文件名设置为download属性。最后，使用click方法模拟单击链接以下载文件，并在下载完成后删除链接并撤销URL