New Article

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

スポンサーリンク

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

WebStorageとは

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

WebStorageの特徴

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

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

WebStorageで保存するデータは、key(キー)とvalue(値)との事。
つまり、質問と答えのワンセットというような感覚で僕は覚えてます。
なので、うまくいかない時はどちらかが、欠けてるかもなんて事も。

HTML

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

HTML
<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を使います。

JavaScript
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));
}

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

参考サイト

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

Yahoo!ブログ - ブログ移行ツール
Yahoo!ブログからの移行ツールです。

WebStorageについてまとめ

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

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

スポンサーリンク
JavaScript
東田ダダーンをフォローする
このブログを購読する
当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可をしてください。 東田ダダーンが更新された際、更新した旨、通知されます。
東田ダダーン

コメント

タイトルとURLをコピーしました