js-cookie를 사용하여 다시로드해도 계속 동일한 탭 메뉴를 여는 방법

소개

탭 메뉴를 사용하는 페이지에서 다시로드하면 상단 탭으로 돌아갑니다 ...
탭 메뉴에서 작업하는 경우 조금 불편합니다 ...

몇 가지 방법이 있지만 이번에는 js-cookie를 사용하여 다시로드해도 열려 있던 탭을 열 수있는 페이지를 구현할 것입니다.

개발 환경

Ruby 3.0.0

Rails 6.1.3

bootstrap 4.6.0

js-cookie 2.2.1

준비

rails 애플리케이션 만들기

이 기사에서는 Rails6을 사용하기 때문에 Rails6 응용 프로그램을 준비하십시오!

bootstrap 설치

rails6의 패키지 설치 방법은 rails5와 다르므로 주의가 필요합니다.
이쪽의 기사가 매우 알기 쉽기 때문에, 참고로 되면 좋을까 생각합니다.
Rails 6에 jQuery와 Bootstrap 넣기

js-cookie 설치

js-cookie의 기사는 별로 많지 않고, 신형과 구형의 기사가 혼재하고 있으므로, 실수하지 않도록 주의합시다!
먼저 js-cookie 패키지를 설치합니다.

terminal

$ yarn add js-cookie

package.json에 추가되면 완료됩니다.

package.json

"js-cookie": "^2.2.1"

탭 메뉴 만들기

bootstrap을 사용하여 탭 메뉴를 만듭니다.
공식 문서 를 참고로 합니다.

hoge.html.erb

<!-- 選択タブ -->
<ul class="nav nav-tabs">
  <li class="nav-item active">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#messages">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>
  </li>
</ul>

<!-- 表示させるコンテンツ -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

여기까지 오면 탭 메뉴의 구현이 생겼을까 생각합니다!

js-cookie 설정

다음으로 js-cookie를 설정합니다.

app/javascript/packs/application.js

window.Cookies = require("js-cookie")

$(document).on('turbolinks:load', function() {
  $(function() {

    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
      var tabName = e.target.href;
      var items = tabName.split("#");
      Cookies.set("openTag",items[1], { expires: 1/24 });
    });

    if(Cookies.get("openTag")){
      $('a[data-toggle="tab"]').parent().removeClass('active');
      $('a[href="#' + Cookies.get("openTag") +'"]').click();
    }
  });
});

window.Cookies = require("js-cookie") 에서 view 파일에서 js-cookie를 사용할 수 있도록하고 있습니다.

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { ... 는 선택 탭을 누를 때의 동작을 나타냅니다.
열린 탭의 href를 찾아서 #을 분리합니다. 그리고 Cookies.set("openTag",items[1], { expires: 1/24 }) 에서 openTag에 방금 분리한 값을 value로 쿠키를 설정합니다.expires: 이제 쿠키의 지속 시간을 설정할 수 있습니다! 단위는 "일"이므로 1/24에서는 1시간이 됩니다.

if(Cookies.get("openTag")){...는 openTag에 쿠키가있을 때의 동작을 보여줍니다.
한 번 li 태그에 붙은 모든 active를 제거합니다. 그런 다음 저장된 openTag 쿠키를 참조하여 click 이벤트를 발생시키고 원래 열려 있던 탭을 엽니 다.

이렇게 설정하면 다시 로드할 때도 저장된 쿠키를 찾아서 열려 있는 원래의 탭 메뉴를 자동으로 열 수 있습니다!

유의점

js-cookie는 대폭적인 업데이트로 구형과 신형 각각의 github이 존재하고 있습니다. 마찬가지로 넷의 기사에서도 그들이 섞여 있습니다. 구형에서는 쿠키를 참조할 때

$.cookie("")

라고 합니다만, 이것을 신타입으로 기술을 하면(자), $.cookie is not a function 라고 분노해 버리므로 주의가 필요합니다.
아무쪼록 조심하세요!