ひとつの方法として、カスタムデータ属性、もしくは id
属性を用いて、各要素に一意な id を割り振っておき、クリックされた要素の id を配列として localStorage に格納しておく方法があります。
このとき、Storage
オブジェクトの key と value が文字列のみをサポートしているため、配列を文字列形式に変換する必要があることに注意しなければなりません[1]。
11.2.1 The Storage interface[1]
Each Storage
object provides access to a list of key/value pairs, which are sometimes called items. Keys are strings. Any string (including the empty string) is a valid key. Values are similarly strings.
この解決策として、JSON.stringify
メソッドを使い、配列を JSON 文字列に変換する方法があります。
const arr = [1, 2, 3];
const stringify = JSON.stringify(arr);
console.log(stringify); //=> [1,2,3]
console.log(JSON.parse(stringify)); //=> Array(3) [ 1, 2, 3 ]
以上を踏まえた上で、質問文のコードを見てみると、id
属性がリスト項目の途中までしか割り振られていないことがわかります。そのため、まずはすべてのリスト項目に id
属性を割り振ります。
<ul>
<li><div id="st1" class="box"></div>東京</li>
<li><div id="st2" class="box"></div>品川</li>
<li><div id="st3" class="box"></div>新横浜</li>
<li><div id="st4" class="box"></div>小田原</li>
<li><div id="st5" class="box"></div>熱海</li>
</ul>
次に jQuery を見ると、変数 slc に空の配列を代入しています。今回は localStorage に配列が存在する場合、localStorage から配列を取得する必要があります。そのため、この変数 slc の初期化部分は、以下のように書くことが出来ます。
ここで、配列を JSON 文字列として保存するため、JSON.parse
メソッドを用いて文字列を配列に変換しなければならないことに注意してください。
$(function() {
$(".box").on("click", function() {
$(this).toggleClass("onbox");
let slc = JSON.parse(localStorage.getItem("clicked_boxes")) || [];
// 以下のコードは省略
});
});
そして次のコードを見ると、shift
, push
メソッドの引数に対して hasClass
メソッドの結果を渡しています。ここではおそらく、「指定した id の要素に onbox クラスが適用されていれば、配列から id を削除し、そうでなければ配列に id を追加する」といった処理を行いたいのだと思います。
しかし、shift
メソッドは引数を使用せず、hasClass
メソッドは真理値を返します。このため、id の追加と削除が正常に機能せず、どの要素がクリックされたのかを判別出来なくなります。
そこで、配列内の id の削除には findIndex
メソッドと splice
メソッドを使い、hasClass
メソッドの返り値は要素が onbox クラスを持っているかの判定にのみ使用するようにします。ここで、findIndex
メソッドと splice
メソッドを使った要素の削除は、以下のように動作します。
var arr = [1, 2, 3, 4, 5];
var index = arr.findIndex(v => v === 3);
console.log(arr); //=> Array(5) [ 1, 2, 3, 4, 5 ]
console.log(index); //=> 2
arr.splice(index, 1);
console.log(arr); //=> Array(4) [ 1, 2, 4, 5 ]
また、この処理を行う要素はクリックされた要素だけであるため、this
キーワードを用いてクリックされた要素のみにこの処理を行います。
The event handler and its environment[2]
When jQuery calls a handler, the this
keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching selector
. (Note that this
may not be equal to event.target
if the event has bubbled from a descendant element.) To create a jQuery object from the element so that it can be used with jQuery methods, use $( this )
.
最後に、localStorage に値を保存するために setItem
メソッドを使います。ここで、配列を JSON 文字列に変換するため、JSON.stringify
メソッドを使用する必要があることに注意してください。
以上を行ない、ページ読み込み時に localStorage に保存されている id の要素に onbox クラスを付与するようにすると、最終的なコードは以下のようになります。
$(function() {
var slc = JSON.parse(localStorage.getItem("clicked_boxes")) || [];
$.map(slc, function(box) {
$("#" + box).addClass("onbox");
});
$(".box").on("click", function() {
var slc = JSON.parse(localStorage.getItem("clicked_boxes")) || [];
if ($(this).hasClass("onbox")) {
var index = slc.findIndex(v => v === $(this).attr("id"));
slc.splice(index, 1);
} else {
slc.push($(this).attr("id"));
}
localStorage.setItem("clicked_boxes", JSON.stringify(slc));
$(this).toggleClass("onbox");
});
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wreppar">
<div class="head">
<h1>東海道新幹線</h1>
</div>
<h2>駅一覧</h2>
<ul>
<li><div id="st1" class="box"></div>東京</li>
<li><div id="st2" class="box"></div>品川</li>
<li><div id="st3" class="box"></div>新横浜</li>
<li><div id="st4" class="box"></div>小田原</li>
<li><div id="st5" class="box"></div>熱海</li>
</ul>
</div>
今回は、クリックされた要素に対して毎回判定処理を行ったうえで、localStorage への id の追加、削除を行いましたが、以下のように onbox クラスが適用されている要素のみを localStorage に保存する方法でも、質問者さんの実現したいことは行なえると思います。
$(function() {
var clicked_boxes = JSON.parse(localStorage.getItem("clicked_boxes")) || [];
$.map(clicked_boxes, function(box) {
$("[data-station-id='" + box + "']").addClass("onbox");
});
$(".box").on("click", function() {
$(this).toggleClass("onbox");
var clicked_boxes = $.map($(".box.onbox"), function(box) {
return $(box).data("station-id");
});
localStorage.setItem("clicked_boxes", JSON.stringify(clicked_boxes));
});
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wreppar">
<div class="head">
<h1>東海道新幹線</h1>
</div>
<h2>駅一覧</h2>
<ul>
<li>
<div class="box" data-station-id="1"></div>東京</li>
<li>
<div class="box" data-station-id="2"></div>品川</li>
<li>
<div class="box" data-station-id="3"></div>新横浜</li>
<li>
<div class="box" data-station-id="4"></div>小田原</li>
<li>
<div class="box" data-station-id="5"></div>熱海</li>
</ul>
</div>