ローカルストレージ

ローカルストレージで複数の値を保存したい時(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>

html5の機能、ローカルストレージを使いたい時

html5のローカルストレージはとても簡単に使えて便利。わざわざ仕組みを解説するより、なるべく単純でそのまま使えるサンプルを記載しておくから、コピーして必要な箇所を変更して使ってもらいたい。
PCから試す時はGoogleのChrome等、html5に対応したブラウザを使うこと。下のサンプルの場合、好きな名前を入力して保存ボタンをクリックした後、リロードしたり別のページを読み込んだ後に戻るとデータが保存されていることが確認できる。

なお、以下のサンプルでは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 na = document.getElementById("na").value;
	localStorage.setItem('name',na);
	alert("保存しました");
}
//ローカルストレージを削除
function removeConfig(){
	na.value = '';
	localStorage.clear();
	alert("削除しました");
}
//ローカルストレージから取得
function getConfig(){
	config_na = localStorage.getItem('name');
	na.value = config_na;
}
//ページ読み込み時にローカルストレージから取得してテキストボックスに表示
$(document).ready(function(){
	getConfig();
});
</script>

html

お名前<input type="text" id="na" />
<button id="button" onclick="setConfig()">保存</button>
<button id="button" onclick="removeConfig()">すべて削除</button>

なお、スマートフォンなどHTML5に対応している可能性が高い環境はこれだけで良いが、PC環境の場合は、まだローカルストレージに対応していないブラウザでアクセスされることが多いだろう。
そんな時は下のようなサンプルで、アラートを出すか、サンプルを参考に条件分けをして処理を分岐するといい。

Javascript

if(typeof localStorage == 'undefined'){alert("ローカルストレージが使えません");}