【javascript】webstrageを使ってcookieのように期間を設定する方法

バナー画像に閉じるボタンを用意して、押したら一定期間表示されないようにしたかった時の備忘録

ボタンを押したら指定した秒数、要素を非表示にするコード

HTMLとCSS

必要な部分だけ書いておく

<style>
#closeBtn{
  display: none;
}
</style>

<div id="closeBtn">×</div>

javascriptとlocalstorageの設定

ボタンをクリックしてlocalstorageを保存する処理
ページが読み込まれてlocalstorageの有無を判断する処理
の2つが必要

<script>
target = document.getElementById("closeBtn");
//ボタンをクリックしたときの処理
document.getElementById("closeBtn").onclick = function() {
  if(!localStorage.getItem('keyname')){//localstoregeがない時
    localStorage['keyname'] = JSON.stringify({
      title: 'closeBtn',//シングル,ダブルクォーテーションで囲まないとうまくいかなかった
      timestamp: new Date().getTime()//タイムスタンプ保存
    });
    target.style.display = "none";
    console.log('localstoregeに保存しました');
  }
};

//ブラウザが読み込まれるときの処理
window.addEventListener('load', function(){
  var jsonStoreObj = JSON.parse(localStorage.getItem("keyname"));//JSON.parseでオブジェクト化
  if(jsonStoreObj!=undefined && jsonStoreObj.timestamp){//localstoregeとタイムスタンプがある時
    console.log('localStorageは保存されているよ');
    var oBjTime = jsonStoreObj.timestamp;//保存されているタイムスタンプ
    var nowTime = new Date().getTime();//現在時刻のタイムスタンプ
    var diffTime = (nowTime-oBjTime)/1000;//①
    var timeLimit = 60*60*24;//1日の秒数(ここを変更すれば期間を変えられる)
    if(diffTime > timeLimit){//差分が1日の秒数を超えていた時
      console.log('けど、期間過ぎているから消すよ');
      localStorage.removeItem("keyname");//localstorageを削除
      target.style.display = "flex";//②
    }
  }else{//localstoregeがない時
    console.log('localStorageは保存されていないよ');
    localStorage.removeItem("keyname");
    target.style.display = "flex";//②
  }
});
</script>

①…
(nowTime-oBjTime)/1000の部分はgetTime()で取得するのが「1970年1月1日 00:00:00 UTCから指定した日時までの経過時間をミリ秒で表した数値。」で、ミリ秒が1000分の1秒だから1000で割って秒数に単位を揃える必要がある

②…
cssで最初から表示をしておいてlocalstorageがあったら非表示にすると、再度アクセスしたときに一瞬表示されてパッと消えてとちらつく
なので最初から非表示にして、localstorageがない時に表示されるようにしてる

以上

以下参考サイト

メモ

window.onloadっていうサイトが読み込まれた時に発火するコードが2つ以上あると駄目みたいで読み込み方法変えた

//変更前
window.onload = function() {…}
//変更後
window.addEventListener('load', function(){…});