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

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク