html, body {
background-color: white;
color:black;
padding: 0;
margin: 0;
}
#closeBtn{
background: black;
border-radius: 100%;
color: white;
font-size: 20px;
font-weight: bold;
display: none;
align-items: center;
justify-content: center;
height: 30px;
line-height: 1;
width: 30px;
}
×
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 = 10;//10秒間localstorageを保存(ここを変更すれば期間を変えられる)
if(diffTime > timeLimit){//差分が10秒を超えていた時
console.log('けど、期間過ぎているから消すよ');
localStorage.removeItem("keyname");//localstorageを削除
target.style.display = "flex";//②
}
}else{//localstoregeがない時
console.log('localStorageは保存されていないよ');
localStorage.removeItem("keyname");
target.style.display = "flex";//②
}
});
【javascript】webstrageを使ってcookieのように期間を設定する方法
2020/06/28