ローカルストレージを使って一度だけ動かすjavascript

WEB制作
WEB制作

ローカルストレージを使ったjavascriptの一例です。
年齢確認を一度だけ表示というのが元で、自分用のメモも兼ねて。

 

 

 

スポンサーリンク

一度だけ動かすjavascript

参考にさせて頂いた解説サイト様があるはずなんですが、
履歴がなくなって検索でも中々見つからないのでリンクができません…。

参考サイト様(判明次第更新)

 

 

 

スポンサーリンク

一度だけ動かすJavascriptの一例

この記事で紹介するのは一度だけ動作するjsです。
一度動作というか表示しない設定にすると二度と表示されません。
年齢確認用のjsなので一度だけでいいだろうという感じです。
※参考サイト様はあるはずですが、見つからなかったです。すみません。

document.addEventListener("DOMContentLoaded", function(event) {
  if (localStorage.getItem('accessed')) {
    document.getElementById('check').style.display = 'none';
  } else {
    localStorage.setItem('accessed', '1');
  }
});

$(window).load(function(){
   $('#check_ok').click(function(){
    document.getElementById('check').style.display = 'none';
   });
})

「check」という要素に注意書きと「check_ok」のボタンを用意して使います。
静的なサイトや個人情報を扱わない、登録等が必要ないサイト向けです。
jsでの動作ですので、無料のレンタルサーバでも動作します。

「check」の要素で画面全体を隠すようにして利用します。

#check{
width:100vw;
height:100vh;
position:fixed;
background: #ffffffe6;
z-index: 10;
}

以上です。

ローカルストレージを利用しているので、対応していないブラウザや、
そもそも別のブラウザを使用したり、他のPC・端末で使用すると再び表示されます。
単純に年齢確認の表示を何度もする必要はないと思ったので作りました。

コメント

タイトルとURLをコピーしました