New Article

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

Advertisement

個人的に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));
}

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

参考サイト

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

【JS】【HTML5】Web Storage を、使いやすくする - プログラム の個人的なメモ
はじめに のサンプルを極力共通化する。 サンプル 「テキストボックス」「ラジオボタン」「セレクトボックス」「セレクトボックス(複数)」「チェック...

WebStorageについてまとめ

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

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

コメント

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