web関連

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

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

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

まずはデモ
×印を押したら10秒間消えるように書いてる

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(){…});

なんか参考サイトで変数名の先頭にアンダーバーつけてたんだけど、C言語の名残だったりスコープの違いを分かりやすくするためにつけていたりと色々な意味があるみたいね
命名もclassですら悩んでるからちゃんと勉強しないとだなぁ

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。