ローカルストレージで複数の値を保存したい時（JSON）

ローカルストレージで複数の値を保存したい時、最も簡単なのはそれぞれの名前で複数のデータを保存すること
例えば以下の方法。

Javascript

<script type="text/javascript">
//複数のローカルストレージに保存
function setConfig(){
	var n = document.getElementById("na").value;
	var t = document.getElementById("te").value;
	var a = document.getElementById("ad").value;
	localStorage.setItem('onamae',n);
	localStorage.setItem('tel',t);
	localStorage.setItem('address',a);
	alert("保存しました");
}
</script>

上記の方法は、保存データがそれぞれ多い場合はそれでも構わないが、少ないデータで無駄に多種類のデータを保存するのは好ましい方法とは言えない。

ローカルストレージに複数の値を保存するにはいくつか方法があるが、今後の展開をふまえてJSON形式で保存する方法を紹介する。
そのまま使えるサンプルになっているから、適所にコピーして自由に改造して使ってもらいたい。

なお、今回も以下のサンプルではjqueryを使うことを前提としているから、まずはヘッダーでjqueryを読み込んでおくこと。

html

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.min.js"></script>

Javascript

<script type="text/javascript">
//ローカルストレージに保存
function setConfig(){
	var n = document.getElementById("na").value;
	var t = document.getElementById("te").value;
	var a = document.getElementById("ad").value;
	//保存データ
	var datalist = {onamae:n,tel:t,address:a}
	//ローカルストレージに保存
	localStorage.setItem('config', JSON.stringify(datalist));
	alert("保存しました");
}
//ローカルストレージを削除
function removeConfig(){
	na.value = '';
	te.value = '';
	ad.value = '';
	localStorage.clear();
	alert("削除しました");
}
//ローカルストレージから取得
function getConfig(){
	if(localStorage.getItem("config")){
		var d = JSON.parse(localStorage.getItem("config"));
		na.value = d.onamae;
		te.value = d.tel;
		ad.value = d.address;
	}
}
//ページ読み込み時にローカルストレージから取得
$(document).ready(function(){
	getConfig();
});
</script>

html

お名前<input type="text" id="na" />
電話番号<input type="text" id="te" />
住所<input type="text" id="ad" />
<button id="button" onclick="setConfig()">保存</button>
<button id="button" onclick="removeConfig()">すべて削除</button>