JavaScript で JSON ファイルの読み書き

とりあえず「ボタンをクリックしたら」という挙動で。

<p>LOAD<input id="load" type="file"></p>
<p><a id="save">SAVE</a></p>

読み

ファイル選択ダイアログを表示して、選択されたファイルが JSON なら内容を data に。getElementById(‘load’) と addEventListener(‘load’, ()) ややこしかった…。

document.getElementById('load').addEventListener('change', function(e) {
	var result = e.target.files[0];
	if (result.type === 'application/json') {
		var FR = new FileReader();
		FR.readAsText(result);
		FR.addEventListener('load', function(){
			data = JSON.parse(FR.result);
			console.log(data);
		})
	}
})

書き

JSON オブジェクトの data をローカルファイル data.json に保存。

document.getElementById('save').addEventListener('click', function(){
	this.href = "data:text/json;charset=utf-8," + encodeURIComponent( JSON.stringify(data) );
	this.download = 'data.json';
})