toggleClassの状態を保存したい
当サイトのリニューアル作業に時間をあてるため、掲示板の投稿は当分停止させていただきます。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<style>
.box{
margin:0 5px 0 0;
padding: 10px 1px 10px 30px;
width: 20px;
height: 50px;
border: 0.5px solid #000;
display: inline;
}
.onbox{
margin:0 5px 0 0;
padding: 10px 1px 10px 30px;
width: 20px;
height: 50px;
border: 0.5px solid #ccc;
display: inline;
background: #000;
}
</style>
<title>沖縄都市モノレール</title>
</head>
<body>
<div class="wreppar">
<div class="head">
<h1>沖縄都市モノレール線（ゆいレール）</h1>
</div>
<h2>駅一覧</h2>
<ul>
<li><div class="box"></div>東京</li>
<li><div class="box"></div>品川</li>
<li><div class="box"></div>新横浜</li>
<li><div class="box"></div>小田原</li>
<li><div class="box"></div>熱海</li>
</ul>
</div>
</body>
</html>
ここまでhtml
ここからjs(jquery)
$(function() {
$('.box').on('click', function() {
$(this).toggleClass('onbox');
});
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<style>
.box{
margin:0 5px 0 0;
padding: 10px 1px 10px 30px;
width: 20px;
height: 50px;
border: 0.5px solid #000;
display: inline;
}
.onbox{
margin:0 5px 0 0;
padding: 10px 1px 10px 30px;
width: 20px;
height: 50px;
border: 0.5px solid #ccc;
display: inline;
background: #000;
}
</style>
<title>沖縄都市モノレール</title>
</head>
<body>
<div class="wreppar">
<div class="head">
<h1>沖縄都市モノレール線（ゆいレール）</h1>
</div>
<h2>駅一覧</h2>
<ul>
<li><div class="box"></div>東京</li>
<li><div class="box"></div>品川</li>
<li><div class="box"></div>新横浜</li>
<li><div class="box"></div>小田原</li>
<li><div class="box"></div>熱海</li>
</ul>
</div>
</body>
</html>
ここまでhtml
ここからjs(jquery)
$(function() {
$('.box').on('click', function() {
$(this).toggleClass('onbox');
});
styleseetやscriptタグは省略してますが。上記のような駅一覧のページでは、jqueryのtoggleClassでboxクラスをクリックするとonboxクラスの追加と削除を繰り返して箱の中に色が付くようになっています。こういったページで、「東京と小田原の行の箱だけクリックされて色がついている」という各行の状態をLocalStorageなどに保存して、リロードしたり次回以降にドキュメントを読み込んだりしたとしてもリセットされることなく前回と同じ状態にすることは可能でしょうか？
能美根上 さん
06月27日 03時02分
能美根上さん、こんにちは。
おっしゃるように、Web Storage（Session Storage/Local Storage）を使えば実現可能と思います。
ロジックとしては以下となるでしょうか。
ここでは具体的なコードは挙げませんが、上記のようにシンプルなロジックですので、スキルアップにちょうど良いと思います。ぜひチャレンジしてみてください。
ちなみに参考までに、localStrageの操作は以下です。
なお、このように1つずつ保存/参照するのは、データが多くなると管理しづらいので、本当は連想配列などを使って保存した方が良さそうです。
ですが、まずは簡単な方法で意図した動作が実現できてから、より良いコードに改善していくと良いと思います。
おっしゃるように、Web Storage（Session Storage/Local Storage）を使えば実現可能と思います。
ロジックとしては以下となるでしょうか。
・各アイテムを選択時に、対象（東京等）の選択された情報を保存
・各アイテムの選択解除時に、対象（東京等）の情報を削除
・ページ読み込み時に情報を参照し、選択されている場合はonboxクラスを付与
・各アイテムの選択解除時に、対象（東京等）の情報を削除
・ページ読み込み時に情報を参照し、選択されている場合はonboxクラスを付与
ここでは具体的なコードは挙げませんが、上記のようにシンプルなロジックですので、スキルアップにちょうど良いと思います。ぜひチャレンジしてみてください。
ちなみに参考までに、localStrageの操作は以下です。
// データを保存（tokyoにselectedを保存する場合。以下含め文字列は任意）
localStorage.setItem("tokyo", "selected");
// データを取得（tokyoの値を取得）
var tokyo = localStorage.getItem("tokyo");
// データを削除（tokyoの値を削除）
localStorage.removeItem("tokyo");
localStorage.setItem("tokyo", "selected");
// データを取得（tokyoの値を取得）
var tokyo = localStorage.getItem("tokyo");
// データを削除（tokyoの値を削除）
localStorage.removeItem("tokyo");
なお、このように1つずつ保存/参照するのは、データが多くなると管理しづらいので、本当は連想配列などを使って保存した方が良さそうです。
ですが、まずは簡単な方法で意図した動作が実現できてから、より良いコードに改善していくと良いと思います。
馬場誠 さん
06月27日 06時26分
