sessionStorageを使ってクリックで付与したcssのクラスを維持する

Filed under: JavaScript — kdcs @ 24年7月20日 土曜日

ボタン要素をクリックし、cssのクラス(is_hidden)を対象の要素に付与する。
is_hiddenで要素を非表示にする。
ページを移動してもis_hiddenを維持するようにsessionStorageにデータを保存する。
セッションの期間のみ有効なのでサイドアクセスした場合は対象要素は表示される。

html

<div id="headline"><button id="hiddenButton">×</button>
<a href="<?php echo post_custom('permalink'); ?>">イベント開催 詳しくはこちら</a></div>
<!--/#headline-->

javascript
※複数のsessionStorageを扱う時は各変数名や(下記class名とconst key名)を変える
※記述は外部ファイルではなくfooter.phpのbody(閉じタグ)前に記述

const headline = document.getElementById('headline');
const button = document.getElementById('hiddenButton');
const key = 'class';
const value = 'is_hidden';
const data = sessionStorage.getItem(key);

if (data) {
headline.classList.add(value);
}

if (button) {
button.addEventListener('click', () => {
headline.classList.toggle(value);
if (headline.classList.contains(value)) {
sessionStorage.setItem(key, value);
} else {
sessionStorage.removeItem(key);
}
});
}

続きは実例を・・・

実例(PCとスマホで切り替える場合)

<script>
<?php if(is_mobile()): ?>
//クリックでヘッドライン 非表示保持 (スマホ)----------------------------------
const headline_Sp = document.getElementById('headlineSp');
const button_Sp = document.getElementById('hiddenButtonSp');
const key_Sp = 'class_hl_sp';
const value_Sp = 'is_hidden';
const data_Sp = sessionStorage.getItem(key_Sp);

if (data_Sp) {
  headline_Sp.classList.add(value_Sp);
}

if (button_Sp) {
  button_Sp.addEventListener('click', () => {
    headline_Sp.classList.toggle(value_Sp);
    if (headline_Sp.classList.contains(value_Sp)) {
      sessionStorage.setItem(key_Sp, value_Sp);
    } else {
      sessionStorage.removeItem(key_Sp);
    }
  });
}
<?php else: ?>
//クリックでヘッドライン 非表示保持 (PC)--------------------------------------
const headline_Pc = document.getElementById('headlinePc');
const button_Pc = document.getElementById('hiddenButtonPc');
const key_Pc = 'class_hl_pc';
const value_Pc = 'is_hidden';
const data_Pc = sessionStorage.getItem(key_Pc);

if (data_Pc) {
  headline_Pc.classList.add(value_Pc);
}

if (button_Pc) {
  button_Pc.addEventListener('click', () => {
    headline_Pc.classList.toggle(value_Pc);
    if (headline_Pc.classList.contains(value_Pc)) {
      sessionStorage.setItem(key_Pc, value_Pc);
    } else {
      sessionStorage.removeItem(key_Pc);
    }
  });
}
<?php endif; ?>
</script>

サイト内検索

カテゴリー

最近の投稿

« |sessionStorageを使ってクリックで付与したcssのクラスを維持する| »
↑上に戻る