안녕하세요 이번 포스트에서는 JavaScript와 localStorage를 활용하여 간단한 메모 애플리케이션을 만들어보겠습니다.
localStorage를 사용하면 웹 브라우저에서 데이터를 영구적으로 저장할 수 있으므로, 페이지를 새로고침해도 메모가 유지됩니다. 사용자는 입력 필드에 메모를 작성하고 추가할 수 있으며, 추가된 메모는 화면에 표시됩니다. 또한, 각 메모 옆에는 삭제 버튼이 있어 메모를 삭제할 수 있습니다. 이를 통해 JavaScript와 localStorage 의 기능을 익히고, 실제로 활용할 수 있는 예제를 만들어보겠습니다.
localStorage는 웹 브라우저에서 제공하는 클라이언트 측 데이터 저장소입니다.
이를 사용하면 웹 애플리케이션에서 데이터를 영구적으로 저장하고 유지할 수 있습니다.
localStorage는 HTML5의 일부로서, JavaScript를 사용하여 간단하게 접근하고 조작할 수 있습니다.
localStorage의 주요 특징은 다음과 같습니다:
- 데이터 영구 보관: 로컬 스토리지에 저장된 데이터는 웹 브라우저를 종료하고 다시 실행해도 유지됩니다. 사용자가 페이지를 새로고침하거나 다른 페이지로 이동해도 데이터가 사라지지 않습니다.
- 용량 제한: 로컬 스토리지는 일반적으로 5MB 정도의 용량을 가지며, 브라우저마다 다를 수 있습니다. 너무 많은 데이터를 저장하면 용량 제한에 도달하여 추가적인 데이터 저장이 불가능할 수 있습니다.
- 도메인 기반: 로컬 스토리지는 도메인 기반으로 동작합니다. 즉, 도메인 내의 모든 페이지에서 동일한 로컬 스토리지에 접근할 수 있습니다. 하지만 다른 도메인의 페이지는 로컬 스토리지에 직접 접근할 수 없으며, 도메인 간 데이터 공유는 웹 스토리지 API의 다른 기능인 세션 스토리지 등을 활용해야 합니다.
localStorage 를 사용하기 위해 JavaScript의 localStorage 객체를 사용합니다.
전체코드 입니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Memo Application</title>
<style>
/* 스타일 */
.memo-container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
}
.memo-input {
width: 100%;
margin-bottom: 10px;
}
.memo-list {
list-style: none;
padding: 0;
}
.memo-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #f1f1f1;
margin-bottom: 10px;
}
.memo-item .memo-content {
flex-grow: 1;
}
.memo-item .memo-actions {
display: flex;
gap: 10px;
}
.memo-item .delete-button {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="memo-container">
<h1>Memo Application</h1>
<form id="memo-form">
<input
type="text"
id="memo-input"
class="memo-input"
placeholder="Enter memo..."
required
/>
<button type="submit">Add Memo</button>
</form>
<ul id="memo-list" class="memo-list"></ul>
</div>
<script>
// 필요한 요소들을 변수로 참조
const memoForm = document.getElementById("memo-form");
const memoInput = document.getElementById("memo-input");
const memoList = document.getElementById("memo-list");
// 로컬 스토리지에서 메모를 가져옴, 없을 경우 빈 배열로 초기화
const memos = JSON.parse(localStorage.getItem("memos")) || [];
// 페이지 로드 시 메모를 렌더링
renderMemos();
// 메모 추가 이벤트 리스너
memoForm.addEventListener("submit", function (e) {
e.preventDefault();
const memoContent = memoInput.value.trim();
if (memoContent) {
// 메모 객체 생성
const memo = {
id: Date.now(),
content: memoContent,
};
// 메모 배열에 추가
memos.push(memo);
// 메모를 로컬 스토리지에 저장
saveMemos();
// 입력 필드 초기화
memoInput.value = "";
// 메모를 다시 렌더링
renderMemos();
}
});
// 메모 삭제 이벤트 리스너
memoList.addEventListener("click", function (e) {
if (e.target.classList.contains("delete-button")) {
const memoId = parseInt(
e.target.parentElement.parentElement.dataset.id
);
// 메모 배열에서 해당 메모를 삭제
memos.splice(
memos.findIndex((memo) => memo.id === memoId),
1
);
// 메모를 로컬 스토리지에 저장
saveMemos();
// 메모를 다시 렌더링
renderMemos();
}
});
// 페이지에 메모를 렌더링
function renderMemos() {
memoList.innerHTML = "";
if (memos.length === 0) {
memoList.innerHTML = "<li>No memos found.</li>";
return;
}
memos.forEach((memo) => {
const memoItem = document.createElement("li");
memoItem.classList.add("memo-item");
memoItem.dataset.id = memo.id;
const memoContent = document.createElement("div");
memoContent.classList.add("memo-content");
memoContent.textContent = memo.content;
const memoActions = document.createElement("div");
memoActions.classList.add("memo-actions");
const deleteButton = document.createElement("span");
deleteButton.classList.add("delete-button");
deleteButton.textContent = "Delete";
memoActions.appendChild(deleteButton);
memoItem.appendChild(memoContent);
memoItem.appendChild(memoActions);
memoList.appendChild(memoItem);
});
}
// 메모를 로컬 스토리지에 저장
function saveMemos() {
localStorage.setItem("memos", JSON.stringify(memos));
}
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| [JavaScript] 폼 요소 이벤트 정리 및 예제 (0) | 2023.08.27 |
|---|---|
| [JavaScript] Canvas로 클릭 이벤트를 받아 애니메이션 만들기(+루프) (0) | 2023.08.22 |
| [JavaScript] 스크롤 시 고정 헤드 배경 영역 내려 가시성 높이기 (0) | 2023.08.12 |
| [JavaScript] 스크롤 위치에 따라 메뉴바 변경하기 (0) | 2023.08.10 |
| [Javascript] canvas로 애니메이션 만들기 (0) | 2023.08.07 |
