ローカルストレージ機能を使って前回アクセスした日時を表示するサンプルです。
実行イメージ
初回アクセス時(「ようこそ!」と表示されます)
2回目のアクセス以降(前回アクセスした日時が表示されます)
ソースコード
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="main.js"></script>
<title>前回のアクセス日時を表示する</title>
</head>
<body>
<p>ようこそ!</p>
<p id="last_access"></p>
</body>
</html>
main.js
// main.js: 前回のアクセス日時を表示する
const MYKEY = "LASTACCESS"; // ローカルストレージキー(アクセス日時保存用)
// ローカルストレージからデータを取り出す関数
function getStorage(){
// ローカルストレージ内容を取得
const ret = localStorage.getItem(MYKEY);
// データ保存の有無をチェック
if(ret !== null){
document.getElementById("last_access").innerHTML = "前回のアクセス: " + ret;
}
// 現在時刻をローカルストレージにセット
setStorage();
}
// ローカルストレージにデータを保存する
function setStorage(){
const datetime = new Date();
localStorage.setItem(MYKEY, datetime);
}
// 起動時の処理
window.addEventListener("load", ()=>{
getStorage();
});
補足
現在時刻の保存はDateオブジェクトの戻り値をそのまま取得しているだけです。
これをsetLocalStrage関数で実行しローカルストレージに保存します。
function setStorage(){ const datetime = new Date(); // 現在日時取得 localStorage.setItem(MYKEY, datetime); // 日時をローカスストレージに保存 }
起動時にgetLoacalStrage関数を呼び出して、保存の有無をチェックし保存されていれば(前回アクセスされていれば)保存内容を表示します。表示後、setLacalStrage関数を実行して現在時刻を保存します。
function getStorage(){ // ローカルストレージ内容を取得 const ret = localStorage.getItem(MYKEY); // データ保存の有無をチェック if(ret !== null){ document.getElementById("last_access").innerHTML = "前回のアクセス: " + ret; } // 現在時刻をローカルストレージにセット setStorage(); }
コメント