<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Kiểm tra và Tạo SessionStorage</h1>
<div id="session-display">Đang kiểm tra...</div>
<p>???? **Lưu ý:** Thử đóng tab này và mở lại, dữ liệu SessionStorage sẽ bị xóa và chương trình sẽ tạo mới.</p>
<script src="script.js"></script>
</body>
</html>
// Copy-Paste toàn bộ đoạn code JavaScript ở trên vào đây
const KEY_NAME = 'userSessionData';
const DISPLAY_ELEMENT_ID = 'session-display';
function handleSessionStorage() {
let sessionData = sessionStorage.getItem(KEY_NAME);
const displayElement = document.getElementById(DISPLAY_ELEMENT_ID);
if (!displayElement) {
console.error(`Không tìm thấy phần tử HTML với id: ${DISPLAY_ELEMENT_ID}`);
return;
}
if (sessionData === null) {
// Trường hợp 1: Dữ liệu chưa có
const newValue = `Lần truy cập đầu tiên: ${new Date().toLocaleTimeString()}`;
sessionStorage.setItem(KEY_NAME, newValue);
displayElement.innerHTML = `
<h2>✅ Đã tạo SessionStorage mới</h2>
<p><strong>Khóa:</strong> ${KEY_NAME}</p>
<p><strong>Giá trị tạo mới:</strong> ${newValue}</p>
`;
console.log(`[SESSION] Đã tạo mới: ${newValue}`);
} else {
// Trường hợp 2: Dữ liệu đã có
displayElement.innerHTML = `
<h2>???? SessionStorage đã tồn tại</h2>
<p>Giá trị này đã được lưu từ trước và không bị mất khi Refresh trang.</p>
<p><strong>Khóa:</strong> ${KEY_NAME}</p>
<p><strong>Giá trị hiện tại:</strong> ${sessionData}</p>
<p style="color: green;">Thử Refresh (F5) để thấy giá trị vẫn giữ nguyên!</p>
`;
console.log(`[SESSION] Đã tồn tại: ${sessionData}`);
}
}
window.onload = handleSessionStorage;