블로그를 운영하는 사람들은 정말 많은 포스트들을 작성하게 됩니다. 이때, 블로그 업로드 기능은 필수적인 기능이며, 사용자가 작성한 글을 임시로 저장하고 나중에 다시 업로드할 수 있도록 도와주는 역할을 합니다. 이번 포스트에서는 자바스크립트의 Local Storage를 활용하여 블로그 업로드 기능을 개발하는 방법에 대해 알아보겠습니다.
Local Storage란?
Local Storage는 웹 브라우저에서 데이터를 클라이언트 측에 저장할 수 있는 메커니즘입니다. 이는 사용자가 브라우저를 닫거나 새로고침해도 데이터가 유지되는 장점이 있습니다. Local Storage는 키-값 쌍의 형태로 데이터를 저장하며, 자바스크립트의 localStorage 객체를 통해 접근할 수 있습니다.
블로그 업로드 기능 개발하기
HTML 마크업
먼저, 업로드할 글의 제목과 내용을 입력받을 수 있는 HTML 마크업을 작성해야 합니다. 예시로 다음과 같이 작성해보겠습니다.
<form id="upload-form">
<input type="text" id="title-input" placeholder="제목을 입력하세요" />
<textarea id="content-input" placeholder="내용을 입력하세요"></textarea>
<button type="submit">업로드</button>
</form>
자바스크립트 코드
자바스크립트 코드를 사용하여 사용자가 작성한 글을 Local Storage에 저장하고, 필요한 경우 다시 불러올 수 있도록 구현해야 합니다.
const form = document.getElementById('upload-form');
const titleInput = document.getElementById('title-input');
const contentInput = document.getElementById('content-input');
form.addEventListener('submit', (e) => {
e.preventDefault();
const title = titleInput.value;
const content = contentInput.value;
if (title && content) {
// 블로그 글을 Local Storage에 저장
localStorage.setItem('recentBlog', JSON.stringify({ title, content }));
alert('업로드되었습니다!');
// 작성한 글 초기화
titleInput.value = '';
contentInput.value = '';
} else {
alert('제목과 내용을 입력해주세요');
}
});
// 페이지가 로드될 때, 만약 Local Storage에 이전에 작성한 글이 있다면 가져와서 입력 필드에 채워줌
window.addEventListener('DOMContentLoaded', () => {
const recentBlog = localStorage.getItem('recentBlog');
if (recentBlog) {
const { title, content } = JSON.parse(recentBlog);
titleInput.value = title;
contentInput.value = content;
}
});
위의 코드는 submit 이벤트를 감지하여 사용자가 제출 버튼을 클릭했을 경우, 입력한 제목과 내용을 Local Storage에 저장합니다. 또한, 페이지가 로드될 때, Local Storage에 이전에 업로드한 글이 있다면 해당 글을 가져와서 입력 필드에 채워줍니다.
마무리
이번 포스트에서는 자바스크립트의 Local Storage를 활용하여 블로그 업로드 기능을 개발하는 방법에 대해 알아보았습니다. 이렇게 구현하면 사용자들은 작성 중인 글을 임시로 저장할 수 있고, 나중에 다시 업로드할 수 있습니다. Local Storage를 이용한 블로그 업로드 기능은 사용자 경험을 향상시키는데 큰 도움이 될 수 있습니다.