로컬 저장소를 이용하여 데이터를 저장하고/ 읽어보고/수정하고/삭제하고를 수행행 보겠습니다.
데이터는 계속 유지가 됩니다. 브라우져를 다시 열어도 다른 부라우져를 써도 내일도 모레도 계속 유지 됩니다.
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 내용이 저장될 변수
let comments = [];
// 내용이 없을 경우 저장될 초기 데이터
let initialComments = [
{ id: 1, comment: '출첵 입니다. 와 일빠다....' },
]
// DOM을 모두 읽고 실행
window.onload = () => {
// 취소하기 버튼을 숨긴다.
document.querySelector("#resetBtn").style.display = 'none';
// 로컬 저장소에서 데이터 읽기
comments = JSON.parse(localStorage.getItem('comments'));
console.log(JSON.stringify(comments));
// 데이터가 없다면
if (comments == null || comments.length == 0) {
// 로컬저장소에 데이터를 저장하고
localStorage.setItem('comments', JSON.stringify(initialComments));
// 저장된 데이터를 읽는다.
comments = JSON.parse(localStorage.getItem('comments'));
}
// 콘솔에 데이터 출력
comments.forEach((comment) => {
console.log(comment);
});
// 화면에 데이터 출력
viewComments();
}
// 화면에 데이터를 출력해 주는 함수
function viewComments() {
let result = "";
comments.forEach((comment) => {
result += `${comment.id}. ${comment.comment}`;
result += ` <button onclick="editForm(${comment.id},'${comment.comment}')">수정</button>`;
result += ` <button onclick="removeComment(${comment.id})">삭제</button><br/>`;
});
document.querySelector("#comments").innerHTML = result;
}
// 데이터 중에서 제일큰 id를 읽어와 +1을 해서 다음 아이디를 만들어 주는 함수
function getNextID() {
return comments.length == 0 ? 1 : Math.max(...comments.map(({ id }) => id)) + 1;
}
// 수정 버튼을 눌렀을때 처리할 함구
function editForm(id, comment) {
document.querySelector("#id").value = id; // id표시
document.querySelector("#comment").value = comment; // comment 표시
// 버튼제목을 수정하기로
document.querySelector("#btn").innerText = '수정하기'
// 취소하기 버튼 보이기
document.querySelector("#resetBtn").style.display = 'inline';
}
// 수정하기 버튼 눌렀을때 실제 수정하는 함수
function editComment() {
// 값읽기
let id = document.querySelector("#id").value;
let comment = document.querySelector("#comment").value;
// 값이 있으면
if (comment != null && comment.trim().length > 0) {
// 반복하면서 같은 id를 찾아 comment를 수정
comments.forEach((item) => {
if (item.id == id) {
item.comment = comment;
}
});
// 데이터 갱신 및 화면 다시 그리기
update();
// 폼을 원래대로 돌리기
resetComment();
}
}
// 지정 id의 comment를 삭제하ㅐ 주는 함수
function removeComment(id) {
console.log(...comments.filter((comment) => comment.id != id));
// 내용중 id가 다른것만 복사
comments = [...comments.filter((comment) => comment.id != id)];
// 데이터 갱신 및 화면 다시 그리기
update();
}
// 저장해주는 함수
function saveComment() {
let id = getNextID(); // id만들기
// 입력값 읽기
let comment = document.querySelector("#comment").value;
// 입력 데이터가 있으면
if (comment != null && comment.trim().length > 0) {
// 객체 작성
let obj = { "id": id, "comment": comment };
console.log(JSON.stringify(obj));
// 배열에 추가
comments.push(obj);
// 입력필드 지우기
document.querySelector("#comment").value = "";
// 데이터 갱신 및 화면 다시 그리기
update();
}
}
function update() {
// 로컬 저장소에 다시 저장
localStorage.setItem('comments', JSON.stringify(comments));
// 로컬 저장소에서 다시 읽기
comments = JSON.parse(localStorage.getItem('comments'));
// 화면에 표시
viewComments();
}
// 폼을 원래대로 만들어 주는 함수
function resetComment() {
document.querySelector("#id").value = 0;
document.querySelector("#comment").value = '';
document.querySelector("#btn").innerText = '저장하기'
document.querySelector("#resetBtn").style.display = 'none';
}
// 버튼의 제목에따라 저장/수정을 해주는 함수
function updateComment() {
let button = document.querySelector("#btn").innerText;
console.log(button);
switch (button) {
case '저장하기':
saveComment();
break;
case '수정하기':
editComment();
break;
}
}
</script>
</head>
<body>
<input type="hidden" id="id" value="0" />
<input type="text" id="comment" placeholder="저장할 내용을 입력하세요" />
<button onclick="updateComment()" id="btn">저장하기</button>
<button onclick="resetComment()" id="resetBtn">취소하기</button>
<hr>
<div id="comments"></div>
</body>
</html>
|
초기화면입니다.
내용을 입력하고 "저장하기"버튼을 누르면 저장이 됩니다.
"수정" 버튼을 누르면 폼에 내용이 표시되며 "수정하기"버튼으로 변경됩니다
내용을 변경하고 "수정하기"버튼을 누르면 데이터가 변경됩니다.
내용을 변경하고 "수정하기"버튼을 누르면 데이터가 변경됩니다.
"삭제"버튼을 누르면 데이터가 삭제 됩니다.
삭제가 처리된 화면입니다.
'Front End > Javascript' 카테고리의 다른 글
| [JavaScript] localforage를 이용한 CRUD(저장/읽기/수정/삭제) (1) | 2024.11.19 |
|---|---|
| [JavaScript] 웹 스토리지(localStorage, sessionStorage) 사용해 보기 (0) | 2024.11.18 |
| [JavaScript] localforage 사용해 보기 (0) | 2024.11.13 |
| [JavaScript] SPA/MPA & SSR/CSR (5) | 2024.11.12 |
| [JavaScript] Axios 사용해 보기 (4) | 2024.11.08 |
