자바스크립트 Local Storage를 활용한 파일 관리자 개발
파일 관리자는 개인이나 조직에서 파일을 보관하고 정리하는 데 도움을 주는 중요한 도구입니다. 이 글에서는 자바스크립트의 Local Storage를 활용하여 간단한 파일 관리자를 개발하는 방법을 알아보겠습니다.
Local Storage란?
Local Storage는 브라우저에서 데이터를 클라이언트 측에 저장하는 데 사용되는 웹 스토리지 기술입니다. Local Storage는 사용자의 로컬 장치에 데이터를 저장하여 다음에도 이용할 수 있게 합니다. 이는 사용자의 컴퓨터, 태블릿 또는 모바일 기기에 데이터를 영구적으로 저장할 수 있다는 장점을 가지고 있습니다.
파일 관리자 개발하기
HTML 구조
먼저 HTML 파일의 구조를 작성합니다. 파일을 업로드하고 목록을 표시하기 위해 다음과 같은 HTML 코드를 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>파일 관리자</title>
</head>
<body>
<h1>파일 관리자</h1>
<input type="file" id="fileInput"">
<button id="uploadButton">업로드</button>
<ul id="fileList"></ul>
<script src="filemanager.js"></script>
</body>
</html>
자바스크립트 코드 작성
이제 자바스크립트 파일을 생성하고 파일 관리자의 주요 기능을 구현합니다.
// 업로드 버튼 클릭 시 파일을 Local Storage에 저장하는 함수
function uploadFile() {
var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function(e) {
var fileData = e.target.result;
localStorage.setItem("file", fileData);
};
reader.readAsDataURL(file);
}
}
// 파일을 Local Storage에서 가져와 목록에 표시하는 함수
function displayFiles() {
var fileList = document.getElementById("fileList");
var fileData = localStorage.getItem("file");
if (fileData) {
var listItem = document.createElement("li");
listItem.textContent = "파일";
fileList.appendChild(listItem);
}
}
// 업로드 버튼과 목록 표시를 위한 이벤트 리스너 등록
document.getElementById("uploadButton").addEventListener("click", uploadFile);
window.addEventListener("load", displayFiles);
파일 관리자 실행
이제 파일 관리자를 실행하여 파일을 업로드하고 목록에 표시해 보세요. 업로드한 파일은 브라우저의 Local Storage에 저장되며, 다음에도 페이지를 불러올 때마다 파일이 로드됩니다.
결론
이번 글에서는 자바스크립트의 Local Storage를 활용하여 간단한 파일 관리자를 개발하는 방법을 알아보았습니다. Local Storage를 이용하면 클라이언트 측에서 데이터를 영구적으로 저장하고 활용할 수 있으므로, 다양한 웹 애플리케이션에서 유용하게 사용될 수 있습니다.
#파일관리자 #로컬저장소