자바스크립트 Local Storage를 이용한 프로필 이미지 업로드 기능 구현

15 Sep 2023

javascript

이번 글에서는 자바스크립트의 Local Storage를 이용하여 프로필 이미지 업로드 기능을 구현하는 방법을 알아보겠습니다.

1. HTML 마크업 작성하기

프로필 이미지를 업로드하기 위해 HTML의 마크업을 작성해야 합니다. 다음 예제는 간단한 사용자 프로필 페이지를 나타냅니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>프로필 페이지</title>
</head>
<body>
    <h1>프로필 페이지</h1>
    <div id="profile">
        <img id="profile-img" src="" alt="프로필 사진">
        <input type="file" id="image-input" accept="image/*">
    </div>
</body>
</html>

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

이제 자바스크립트로 프로필 이미지 업로드 기능을 구현해보겠습니다.

// 이미지 입력 필드와 프로필 이미지 엘리먼트 가져오기
const imageInput = document.getElementById('image-input');
const profileImg = document.getElementById('profile-img');

// 이미지 입력 필드에 변화가 생겼을 때 이벤트 처리하기
imageInput.addEventListener('change', function(event) {
    const file = event.target.files[0]; // 업로드된 파일 가져오기
    const reader = new FileReader(); // 파일 리더 생성

    // 파일 리더가 이미지를 읽으면 이벤트 처리하기
    reader.addEventListener('load', function() {
        profileImg.src = reader.result; // 프로필 이미지 엘리먼트에 이미지 소스 설정하기
        localStorage.setItem('profileImage', reader.result); // 이미지 데이터를 Local Storage에 저장하기
    });

    // 파일 리더로 이미지 읽기
    reader.readAsDataURL(file);
});

// 페이지 로드 시 Local Storage에서 프로필 이미지 가져오기
window.addEventListener('load', function() {
    const savedImage = localStorage.getItem('profileImage');

    if (savedImage) {
        profileImg.src = savedImage;
    }
});

위의 코드는 이미지 입력 필드가 변화하면 파일을 읽고, 파일 리더를 통해 이미지를 읽은 후 프로필 이미지 엘리먼트에 이미지를 표시하고, 해당 이미지 데이터를 Local Storage에 저장합니다. 또한, 페이지가 로드될 때 Local Storage에서 프로필 이미지를 가져와서 표시합니다.

3. 장점과 주의사항

이미지를 Local Storage에 저장하여 프로필 이미지를 유지할 수 있게 함으로써 사용자 경험을 향상시킬 수 있습니다. 또한, 사용자의 프로필 이미지를 서버에 업로드하지 않고도 손쉽게 관리할 수 있습니다.

하지만, Local Storage에 이미지를 저장하면 이미지 사이즈가 큰 경우에 저장 공간을 많이 차지할 수 있으므로 주의해야 합니다. 또한, 브라우저 지원이나 보안 정책에 따라 Local Storage가 제한될 수 있으므로 이러한 사항에 대해서도 고려해야 합니다.

이상으로 자바스크립트 Local Storage를 이용한 프로필 이미지 업로드 기능 구현에 대해 알아보았습니다. 이를 통해 사용자의 프로필 이미지 관리를 쉽고 효율적으로 할 수 있습니다.

#프로필 #이미지 #업로드