WebStorageを使って、ブラウザにチェックボックスの有無を保存する

個人的にcookieより便利だと思うWebStorage。
チェックボックスの有無の情報をブラウザに残す方法について、メモ・忘備録です。

WebStorageとは

無知な僕は初めて聞いた時、バッファローやIODATAかなと思っておりました。
WEBサイトで何か設定を保存する場合、cookieとかで保存するんやろなってぼんやり思ってました。

WebStorageの特徴

• cookieよりも保存できる容量が多く、5MBまで保存できる
• WebStorageの中にも2種あり、「セッション」と「ローカル」がある
• 「ローカル」は永続的に保存でき、ブラウザを閉じても保存されている
• keyとvalueで値を保存する形

上記のような特徴を持っており、javascriptで操作できます。

HTML

今回はWebStorageを使って、チェックボックスの有無の情報をチェックを入れた時点でブラウザに残す・保存する方法をメモします。

<label><input type="checkbox" value="test1" name="check_save"></label>
<label><input type="checkbox" value="test2" name="check_save"></label>
<label><input type="checkbox" value="test3" name="check_save"></label>

チェックボックス等はいたって普通の内容です。

JavaScript

jsonを使います。

var SavingKey = 'keyname';
$(function() {
	var searchData = loadJsonData(SavingKey);
	if (searchData) {
		$('input[name="check_save"]').val(searchData.checkboxData);
	}
});
$('input[name="check_save"]').click(function() {
	var searchDataset = new Object();
	searchDataset.checkboxData = [];
	$('input[name="check_save"]:checked').each(function() {
		searchDataset.checkboxData.push($(this).val());
	});
	saveJsonData(SavingKey, searchDataset);
});
function loadJsonData(key) {
	if(!localStorage) {
		document.getElementById('message').innerText
		 = '表示を保存できません';
		return null;
	}
	var loadingDataset = localStorage.getItem(key);
	if (!loadingDataset) {
		document.getElementById('message').innerText
		  = 'データが保存されていません';
		return null;
	}
	return JSON.parse(loadingDataset);
}
function saveJsonData(key, savingDataset) {
	if(!localStorage) {
		return;
	}
	localStorage.setItem(key, JSON.stringify(savingDataset));
}

チェックボックスに変更があった時点で、保存します。

参考サイト

下記のページを参考させていただきました。ありがとうございます！

https://blogs.yahoo.co.jp/dk521123/35656214.html

blogs.yahoo.co.jp

WebStorageについてまとめ

この記事で紹介した内容だと、フォームなど限られた部分でしか使いどころがないかもしれませんが、応用すればいろいろ使えそうです。

ブラウザってかしこいですね。