下記のような駅一覧のページでは、jQueryのtoggleClassでboxクラスをクリックするとonboxクラスの追加と削除を繰り返して箱の中に色が付くようになっています。こういったページで「東京と小田原の行の箱だけクリックされて色がついている」という各行の状態を配列にし、LocalStorageなどに保存すれば、リロードしたり次回以降にドキュメントを読み込んだりしたとしてもリセットされることなく前回と同じ状態にすることができるということはわかりました。

しかし、肝心の配列の作成に行き詰ってます。
空の配列を作って、そこに「東京」や「品川」の行のbox要素がクリックされonboxが追加した時に配列にその行を情報を保存。再度box要素がクリックされonboxが削除されたときにその行の情報を削除する。というイメージなのですが、うまくいきません。
配列内にonboxのあるid要素を保存したり削除したりしたりする感じなのですが。hasClassでtrueとfalseを返したのものを配列に保存するなど迷走してます。

<!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　id="st1" class="box"></div>東京</li>
      <li><div id="st2" 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>

$(function() {
    $('.box').on('click', function() {
        $(this).toggleClass('onbox');
    });
});

配列を作成するコード:

$('.box').on('click', function() {
  let slc = [];

  let p = $('#st1').hasClass('onbox');
  if( p ) {
    slc.shift(p);
    slc.push(p);
  } else {
    slc.shift(p);
    slc.push(p);
  }

  let r = $('#st2').hasClass('onbox');
  if( r ) {
    slc.shift(r);
    slc.push(r);
  } else {
    slc.shift(r);
    slc.push(r);
  }
});