본문 바로가기
JavaScript

[JavaScript] 세션 스토리지 사용해 간단한 퀴즈 상태 저장하기

by teamnova 2024. 11. 6.
728x90

안녕하세요! 이번 글에서는 세션 스토리지를 사용하는 방법에 대해 알아보겠습니다.

1. 세션 스토리지란?

세션 스토리지는 웹 브라우저에 내장된 데이터 저장 공간 중 하나로, 브라우저 세션이 유지되는 동안에만 데이터를 저장할 수 있는 기능입니다. 세션 스토리지에 저장된 데이터는 탭이나 창을 닫으면 사라지기 때문에, 특정 세션 동안만 필요한 데이터를 저장하는 데 매우 유용합니다.

주요 특징

  1. 세션 유지: 세션 스토리지에 저장된 데이터는 브라우저 탭을 종료하면 삭제됩니다. 다른 창이나 탭에는 접근할 수 없습니다.
  2. 도메인 격리: 세션 스토리지에 저장된 데이터는 현재 도메인과 현재 탭에 한정됩니다. 즉, 한 탭에서 저장한 데이터는 동일한 도메인에서도 다른 탭에서 접근할 수 없습니다.
  3. 키-값 쌍(Key-Value Pair) 형식: 로컬 스토리지와 마찬가지로 데이터를 키-값 쌍으로 저장하며, 키와 값은 모두 문자열이어야 합니다. 따라서 객체를 저장하기 위해서는 JSON 형식으로 변환해야 합니다.
  4. 저장 용량: 세션 스토리지는 일반적으로 로컬 스토리지와 비슷한 용량을 제공합니다. 약 5-10MB 정도로 작은 데이터를 저장하기에 적합합니다.
  5. JavaScript API로 접근 가능: 세션 스토리지는 JavaScript를 사용해 접근하고 조작할 수 있습니다. 예를 들어 데이터를 저장할 때는 sessionStorage.setItem(key, value)를 사용하고, 데이터를 불러올 때는 sessionStorage.getItem(key)을 사용합니다.

세션 스토리지 사용 예시

// 데이터 저장하기
sessionStorage.setItem('currentQuestion', '2');

// 데이터 불러오기
const currentQuestion = sessionStorage.getItem('currentQuestion');
console.log(currentQuestion); // '2'

// 데이터 삭제하기
sessionStorage.removeItem('currentQuestion');

 

2. 간단한 퀴즈 애플리케이션 만들기

이제 세션 스토리지를 활용하여 간단한 퀴즈 애플리케이션을 만들어 보겠습니다. 사용자가 퀴즈를 풀어나가다가 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열었을 때, 사용자가 마지막으로 풀었던 퀴즈의 상태를 기억하고 복원하는 기능을 구현할 것입니다.

2.1 프로젝트 준비

우리는 HTML, CSS, 그리고 JavaScript를 사용하여 이 애플리케이션을 구현할 것입니다. 기본적인 HTML 폼을 통해 사용자가 퀴즈에 답할 수 있도록 하고, JavaScript를 사용해 세션 스토리지에 현재 퀴즈 상태를 저장합니다.

2.2 HTML 구성하기

HTML 파일을 작성하여 기본적인 구조를 만들어 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 퀴즈 애플리케이션</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>간단한 퀴즈</h1>
    <div id="quiz-container">
        <p id="question">퀴즈 질문이 여기에 표시됩니다.</p>
        <button id="next-button">다음 질문</button>
    </div>
    <script src="script.js"></script>
</body>
</html>
  • div 태그를 사용하여 퀴즈 질문을 표시하고, button 태그를 통해 사용자가 다음 질문으로 이동할 수 있도록 하였습니다.
  • id를 통해 질문과 버튼을 쉽게 JavaScript로 조작할 수 있도록 하였습니다.

2.3 CSS 스타일 추가하기

간단한 CSS 스타일을 추가하여 퀴즈 애플리케이션을 더 보기 좋게 만들어 봅시다.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}

#quiz-container {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}

button:hover {
    background-color: #0056b3;
}

 

2.4 JavaScript로 기능 구현하기

이번에는 JavaScript를 사용하여 퀴즈 애플리케이션의 상태를 관리하고, 세션 스토리지에 저장하는 기능을 구현하겠습니다.

 

2.4.1 퀴즈 질문 데이터

우선, 퀴즈 질문을 관리할 간단한 데이터 배열을 만들어 보겠습니다.

const questions = [
    "HTML의 약자는 무엇인가요?",
    "CSS는 무엇의 약자인가요?",
    "JavaScript는 어떤 언어인가요?"
];

 

2.4.2 현재 질문 표시하기

퀴즈의 현재 상태를 표시하고, 사용자가 버튼을 클릭하면 다음 질문으로 넘어가는 기능을 구현해 보겠습니다.

let currentQuestionIndex = parseInt(sessionStorage.getItem('currentQuestionIndex')) || 0;

function displayQuestion() {
    const questionElement = document.getElementById('question');
    questionElement.textContent = questions[currentQuestionIndex];
}

document.getElementById('next-button').addEventListener('click', function () {
    if (currentQuestionIndex < questions.length - 1) {
        currentQuestionIndex++;
        sessionStorage.setItem('currentQuestionIndex', currentQuestionIndex);
        displayQuestion();
    } else {
        alert('퀴즈가 끝났습니다!');
        sessionStorage.removeItem('currentQuestionIndex');
    }
});

displayQuestion();
  • sessionStorage.getItem('currentQuestionIndex')를 사용하여 이전에 저장된 질문 인덱스를 불러옵니다. 없으면 기본값으로 0을 사용합니다.
  • sessionStorage.setItem('currentQuestionIndex', currentQuestionIndex)를 사용하여 현재 질문 인덱스를 세션 스토리지에 저장합니다.
  • 사용자가 마지막 질문에 도달하면 퀴즈가 끝났다는 알림을 표시하고, 세션 스토리지에서 저장된 상태를 삭제합니다.

3. 전체 코드 보기

아래는 이번에 구현한 간단한 퀴즈 애플리케이션의 전체 코드입니다.

HTML (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 퀴즈 애플리케이션</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>간단한 퀴즈</h1>
    <div id="quiz-container">
        <p id="question">퀴즈 질문이 여기에 표시됩니다.</p>
        <button id="next-button">다음 질문</button>
    </div>
    <script src="script.js"></script>
</body>
</html>
  •  

CSS (style.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}

#quiz-container {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: inline-block;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}

button:hover {
    background-color: #0056b3;
}

 

JavaScript (script.js)

const questions = [
    "HTML의 약자는 무엇인가요?",
    "CSS는 무엇의 약자인가요?",
    "JavaScript는 어떤 언어인가요?"
];

let currentQuestionIndex = parseInt(sessionStorage.getItem('currentQuestionIndex')) || 0;

function displayQuestion() {
    const questionElement = document.getElementById('question');
    questionElement.textContent = questions[currentQuestionIndex];
}

document.getElementById('next-button').addEventListener('click', function () {
    if (currentQuestionIndex < questions.length - 1) {
        currentQuestionIndex++;
        sessionStorage.setItem('currentQuestionIndex', currentQuestionIndex);
        displayQuestion();
    } else {
        alert('퀴즈가 끝났습니다!');
        sessionStorage.removeItem('currentQuestionIndex');
    }
});

displayQuestion();

'JavaScript' 카테고리의 다른 글

[JavaScript] 웹에서 동작하는 계산기 앱 만들기  (0) 2024.11.10
[JavaScript] OpenStreetMap 지도 출력하여 특정 경로에 선 그리기  (2) 2024.11.07
[JavaScript] OpenStreetMap 지도 출력하여 특정 위치에 마커 찍기  (2) 2024.11.03
[JavaScript] 로컬스토리지 사용해 즐겨찾는 링크 저장하기  (0) 2024.10.31
[JavaScript] Leaflet를 활용한 OpenStreetMap 지도 출력하기  (2) 2024.10.28

관련글

티스토리툴바