JavaScript:前回のアクセス日時を表示する

JavaSciptのロゴ画像 JavaScript

ローカルストレージ機能を使って前回アクセスした日時を表示するサンプルです。

実行イメージ

初回アクセス時(「ようこそ!」と表示されます)

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

コメント

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