閲覧したページにチェックを入れるUIを実装したい

閲覧したページにチェックを入れるUIを実装したい。

実装方法は3つ
1.Cookie
2.localStorage
3.IndexedDB

IndexedDBは値をオブジェクトで持つことができ、色々できる反面設定に少し手間がかかる。
今回はチェック入れるだけのシンプルなものなので除外した。

CookieとlocalStorageは基本的にはどちらでも良いと思うが少し違いはある。
以下のサイトがわかりやすい。
https://www.granfairs.com/blog/staff/local-storage-01

1.Cookieで実装

HTMLはsetCookie関数の引数だけ違います。
Cookieの期限は適宜設定してください。

index.js

const setCookie = key => {
  document.cookie = `${key}=1;path=/`;
}

const getCookie = () => {
  // ページ名を配列で入れておく 
  const pageList = ['index', 'page1', 'page2'];

  const cookies = document.cookie;
  const navEl = document.querySelectorAll('.navItem');

  //取得したcookieとpagelistを照らし合わせてヒットしたら[browsed!]を入れる
  pageList.forEach((page, index) => {
    if (cookies.indexOf(page) >= 0) {
      navEl[index].insertAdjacentHTML('beforeend', ' [browsed!]')
    }
  });
}

index.html

  <ul id="nav">
    <li><a href="index.html" class="navItem">index</a></li>
    <li><a href="page1.html" class="navItem">page1</a></li>
    <li><a href="page2.html" class="navItem">page2</a></li>
  </ul>
  <script src="index.js"></script>
  <script>
    setCookie('index'); //ページ名を引数に入れておく
    getCookie();
  </script>

page1.html

  <ul id="nav">
    <li><a href="index.html" class="navItem">index</a></li>
    <li><a href="page1.html" class="navItem">page1</a></li>
    <li><a href="page2.html" class="navItem">page2</a></li>
  </ul>
  <script src="index.js"></script>
  <script>
    setCookie('page1'); //ページ名を引数に入れておく
    getCookie();
  </script>

page2.html

  <ul id="nav">
    <li><a href="index.html" class="navItem">index</a></li>
    <li><a href="page1.html" class="navItem">page1</a></li>
    <li><a href="page2.html" class="navItem">page2</a></li>
  </ul>
  <script src="index.js"></script>
  <script>
    setCookie('page2'); //ページ名を引数に入れておく
    getCookie();
  </script>

2.localStorageで実装

HTMLはsetLocalStorage関数の引数だけ違います。
sessionStorageにしたい場合は適宜変更してください。

index.js

const setLocalStorage = key => {
  localStorage.setItem(key, 1);
}

const getLocalStorage = () => {
  // ページ名を配列で入れておく 
  const pageList = ['index', 'page1', 'page2'];

  const navEl = document.querySelectorAll('.navItem');

  //localStorageとpagelistを照らし合わせてヒットしたら[browsed!]を入れる
  pageList.forEach((page, index) => {
    if (localStorage.getItem(page)) {
      navEl[index].insertAdjacentHTML('beforeend', ' [browsed!]')
    }
  });
}

index.html

  <ul id="nav">
    <li><a href="index.html" class="navItem">index</a></li>
    <li><a href="page1.html" class="navItem">page1</a></li>
    <li><a href="page2.html" class="navItem">page2</a></li>
  </ul>
  <script src="index.js"></script>
  <script>
    setLocalStorage('index'); //ページ名を引数に入れておく
    getLocalStorage();
  </script>

page1.html

  <ul id="nav">
    <li><a href="index.html" class="navItem">index</a></li>
    <li><a href="page1.html" class="navItem">page1</a></li>
    <li><a href="page2.html" class="navItem">page2</a></li>
  </ul>
  <script src="index.js"></script>
  <script>
    setLocalStorage('page1'); //ページ名を引数に入れておく
    getLocalStorage();
  </script>

page2.html

  <ul id="nav">
    <li><a href="index.html" class="navItem">index</a></li>
    <li><a href="page1.html" class="navItem">page1</a></li>
    <li><a href="page2.html" class="navItem">page2</a></li>
  </ul>
  <script src="index.js"></script>
  <script>
    setLocalStorage('page2'); //ページ名を引数に入れておく
    getLocalStorage();
  </script>

参考