페이지 새로 고침시에도 선택한 부트 스트랩 카드의 테두리를 유지하는 방법은 무엇입니까?

이제 6 개의 부트 스트랩 카드가 있습니다. 모든 카드 세부 정보를 로컬 저장소에 저장하기위한 코드를 작성했으며 클릭시 카드에 테두리가 표시됩니다. 원하는 페이지를 새로 고칩니다. 카드 테두리를 유지해야합니다. 내 HTML 코드는 다음과 같습니다.

<div class="row">

  <div class="col-4" onclick="getGoal(1)">
    <div class="card4 mt-3" id="room_1" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_1"><b>I am redecorating</b></p>
        </div>
      </center>
    </div>
  </div>

  <div class="col-4" onclick="getGoal(2)">
    <div class="card4 mt-3" id="room_2" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_2"><b>I am Moving</b></p>
        </div>
      </center>
    </div>
  </div>

  <div class="col-4" onclick="getGoal(3)">
    <div class="card4 mt-3" id="room_3" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_3"><b>I need help with a layout</b></p>
        </div>
      </center>
    </div>
  </div>

  <div class="col-4" onclick="getGoal(4)">
    <div class="card4 mt-3" id="room_4" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_4"><b>I am looking for a species</b></p>
        </div>
      </center>
    </div>
  </div>

  <div class="col-4" onclick="getGoal(5)">
    <div class="card4 mt-3" id="room_5" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_5"><b>I am moving with someone</b></p>
        </div>
      </center>
    </div>
  </div>

  <div class="col-4" onclick="getGoal(6)">
    <div class="card4 mt-3" id="room_6" style="width: 12rem; height:9rem;">
      <center>
        <div class="card-body">
          <p class="card-text mt-4" id="cont_6"><b>Other</b></p>
        </div>
      </center>
    </div>
  </div>

</div>
<!--Loop ends-->
<a class="link mt-3"><u>Dont see your room?</u></a>
<div class="row mb-3">
  <div class="col-4 mr-5">
    <a href="/modsy/rooms/" class="previous" onClick="history.go(-1);">&laquo; Home</a>
  </div>
  <div class="col-4 ml-5">
    <a href="/modsy/furniture" class="next">Next &raquo;</a>
  </div>
</div>

내 JS 코드 :

$(document).ready(function(){
  // goals
  $("#room_1").click(function(){
    $("#room_1").toggleClass("blue");
  });

  $("#room_2").click(function(){
    $("#room_2").toggleClass("blue");
  });

  $("#room_3").click(function(){
    $("#room_3").toggleClass("blue");
  });

  $("#room_4").click(function(){
    $("#room_4").toggleClass("blue");
  });

  $("#room_5").click(function(){
    $("#room_5").toggleClass("blue");
  });

  $("#room_6").click(function(){
    $("#room_6").toggleClass("blue");
  });

  $("#room_7").click(function(){
    $("#room_7").toggleClass("blue");
  });

  $("#room_8").click(function(){
    $("#room_8").toggleClass("blue");
  });

  $("#room_9").click(function(){
    $("#room_9").toggleClass("blue");
  });

});

var goal = [];
var goalIds = [];

function getGoal(id) {
  if (goal.length > 0) {
    var data = {
      id: id,
      content: $("#cont_" + id).text()
    }
    var x = JSON.stringify(data)
    var index = goal.indexOf(x)
    if (index == -1) {
      goal.push(x);
    } else {
      goal.splice(index, 1);
    }
  } else {
    var data = {
      id: id,
      content: $("#cont_" + id).text()
    }
    var x = JSON.stringify(data);
    goal.push(x);
  }
  localStorage.setItem("goal", JSON.stringify(goal));
  goalIds = goal.map(element => JSON.parse(element).id);
  console.log(goalIds);
  issample();
}

function issample() {
  $("#goal").val(goalIds);
  console.log(goalIds);
}

function initGoals() {
  var storedNames = JSON.parse(localStorage.getItem("goal") || '[]');
  goalIds = storedNames.map(element => JSON.parse(element).id);
}

내 코드 펜 링크 : https://codepen.io/lakshmi123__/pen/xxbzwNP