자바스크립트 Local Storage를 이용한 채팅 애플리케이션 구현

15 Sep 2023

javascript

소개

이번 포스트에서는 자바스크립트의 Local Storage를 이용하여 간단한 채팅 애플리케이션을 구현하는 방법을 알아보겠습니다. 채팅 애플리케이션은 사용자가 메시지를 입력하면 그 메시지를 화면에 출력하고, 이전에 입력한 메시지를 Local Storage에 저장하여 페이지를 새로고침해도 이전 메시지를 볼 수 있도록 합니다.

구현 단계

1. HTML 구조 설정

먼저, 간단한 HTML 구조를 설정해야 합니다. 아래는 채팅 애플리케이션에 필요한 HTML 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <title>채팅 애플리케이션</title>
</head>
<body>
    <h1>채팅 애플리케이션</h1>
    <div id="chat-box"></div>
    <input type="text" id="message-input">
    <button id="send-button">전송</button>
</body>
</html>

2. 자바스크립트 코드 작성

이제, 자바스크립트 코드를 작성하여 채팅 애플리케이션을 구현할 차례입니다. 아래는 필요한 자바스크립트 코드입니다.

// 메시지를 화면에 출력하는 함수
function displayMessage(message) {
    const chatBox = document.getElementById('chat-box');
    const messageElement = document.createElement('p');
    messageElement.textContent = message;
    chatBox.appendChild(messageElement);
}

// 전송 버튼 클릭 이벤트 핸들러
function sendMessage() {
    const messageInput = document.getElementById('message-input');
    const message = messageInput.value;
    if (message) {
        displayMessage(message);

        // Local Storage에 메시지 저장
        let messages = JSON.parse(localStorage.getItem('messages')) || [];
        messages.push(message);
        localStorage.setItem('messages', JSON.stringify(messages));

        // 입력 필드 초기화
        messageInput.value = '';
    }
}

// 페이지 로드 시 실행되는 함수
function init() {
    // 이전에 입력한 메시지들을 Local Storage에서 가져와서 화면에 출력
    let messages = JSON.parse(localStorage.getItem('messages')) || [];
    for (let message of messages) {
        displayMessage(message);
    }

    // 전송 버튼 클릭 이벤트 리스너 등록
    const sendButton = document.getElementById('send-button');
    sendButton.addEventListener('click', sendMessage);
}

init();

3. 채팅 애플리케이션 실행

작성한 HTML 파일을 웹 브라우저에서 열어서 채팅 애플리케이션을 실행해보세요. 메시지를 입력하고 전송 버튼을 클릭하면 해당 메시지가 화면에 출력되고, 이전에 입력한 메시지들도 새로고침해도 남아있는 것을 확인할 수 있습니다.

마무리

이번 포스트에서는 자바스크립트의 Local Storage를 이용하여 채팅 애플리케이션을 구현하는 방법을 알아보았습니다. Local Storage를 사용하면 웹 페이지에서 데이터를 영구적으로 저장하고 재사용할 수 있습니다. 채팅 애플리케이션 외에도 다양한 웹 애플리케이션에서 Local Storage를 활용할 수 있으니 참고하시기 바랍니다.

#JavaScript #LocalStorage #ChatApplication