login.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブログサイト - ログイン</title>
</head>
<body>
<h1>ログイン</h1>
<form id="login-form">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">パスワード:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="ログイン">
</form>
<script src="script.js"></script>
</body>
</html>script.js
document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault(); // フォームのデフォルトの動作をキャンセル
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// ログイン処理（例としてユーザー名がadmin、パスワードがpasswordの場合にログイン成功とする）
if (username === 'admin' && password === 'password') {
// Cookieにログイン情報を保存
document.cookie = 'username=' + username + '; path=/'; // path=/ は全てのページでCookieを利用することを示す
window.location.href = 'dashboard.html'; // ログイン成功後のページにリダイレクト
} else {
alert('ログインに失敗しました');
}
});dashboard.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ブログサイト - ダッシュボード</title> </head> <body> <h1>ダッシュボード</h1> <p>ようこそ、<span id="username"></span>さん</p> <script src="script.js"></script> <script> // Cookieからユーザー名を取得して表示 var cookies = document.cookie.split(';'); var username = null; for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); if (cookie.indexOf('username=') === 0) { username = cookie.substring('username='.length, cookie.length); break; } } if (username) { document.getElementById('username').textContent = username; } </script> </body> </html>
