16차 수요일을 포함해서 같은 문제로 고민했기에 merge해서 올리겠다.
나의 localstorage에 값들을 저장하여 table에 출력하는거 까지는 무난하게 되는데 삭제가 어려웠다.
정확하게 말하자면 지정한 값만 모달창을 띄운 후 해당 num과 지정한 id값을 비교해보고
if(passwords === inputPsw) 라면 지워줘. 가 어려웠다.
각자 할당해 주고 각 할당에 인덱싱 해주는 로직
const boardTableBody = document.querySelector("#board-body");
const contentsContainer = document.querySelector(".contents__container");
const editorForm = document.querySelector("#editor-form");
const titleInput = document.querySelector("#editor-title-input");
const pswInput = document.querySelector("#editor-psw-input");
const contentInput = document.querySelector("#editor-content-input");
const BOARDLIST_LS = "boardLists";
const boardListsObj = [];
let nums = 1;
let date = new Date();
let views = Math.floor(Math.random() * 99) + 1;
let delBtn = "X";
//인덱싱 ()
function assignIndex() {
const lists = JSON.parse(localStorage.getItem(BOARDLIST_LS));
if (!lists) {
nums = 1;
} else {
nums = parseInt(lists[lists.length - 1].num) + 1;
}
}
입력하는 로직
function onEditorFormSubmit(e) {
e.preventDefault();
const content = contentInput.value;
const psw = pswInput.value;
const title = titleInput.value;
const lists = JSON.parse(localStorage.getItem(BOARDLIST_LS));
if (title === "") {
alert("성함을 작성해 주세요");
} else if (psw === "") {
alert("비밀번호를 입력해 주세요");
} else if (content === "") {
alert("후기를 작성해 주세요");
} else if (!lists) {
const objArr = [];
objArr.push({
num: `${nums++}`,
content: `${content}`,
author: `${title}`,
passwards: `${psw}`,
date: `${date.getFullYear()}
.${date.getMonth() + 1}.${date.getDate()}.`,
views: `${views++}`,
});
localStorage.setItem(BOARDLIST_LS, JSON.stringify(objArr));
} else {
lists.push({
num: `${nums++}`,
content: `${content}`,
author: `${title}`,
passwards: `${psw}`,
date: `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}.`,
views: `${views++}`,
});
localStorage.setItem(BOARDLIST_LS, JSON.stringify(lists));
}
titleInput.value = "";
contentInput.value = "";
titleInput.focus();
window.location.reload();
}
입력된 값들을 table에 띄워주는 로직
function showBoardLists() {
const lists = JSON.parse(localStorage.getItem(BOARDLIST_LS));
lists.forEach((list, index) => {
if (index < 5) {
const tr = document.createElement("tr");
tr.classList.add("board__content");
const tdNum = document.createElement("td");
tdNum.classList.add("board__content-column");
tdNum.textContent = list.num;
const tdContent = document.createElement("td");
tdContent.classList.add("board__content-column");
tdContent.textContent = list.content;
const tdAuthor = document.createElement("td");
tdAuthor.classList.add("board__content-column");
tdAuthor.textContent = list.author;
const tdDate = document.createElement("td");
tdDate.classList.add("board__content-column");
tdDate.textContent = list.date;
const tdViews = document.createElement("td");
tdViews.classList.add("board__content-column");
tdViews.textContent = list.views;
const removeBtn = document.createElement("button");
removeBtn.classList.add("board__Btn-column");
removeBtn.textContent = "❌";
removeBtn.id = list.num;
removeBtn.addEventListener("click", () => {
// 모달창 띄우기
// showModal(removeBtn.id);
delInfo(removeBtn.id);
});
tr.appendChild(tdNum);
tr.appendChild(tdContent);
tr.appendChild(tdAuthor);
tr.appendChild(tdDate);
tr.appendChild(tdViews);
tr.appendChild(removeBtn);
boardTableBody.appendChild(tr);
const linkToContent = document.querySelector(`#link-to-content${index}`);
// linkToContent.addEventListener('click', onTitleClick);
// 게시글 5개[인덱싱번호] 이상 시 페이지 넘어가게
} else if (index === 5) {
const boardIndexMax = Math.ceil(lists.length / 5);
for (let i = 0; i < boardIndexMax; i++) {
const indexContainer = document.querySelector("#index-container");
const aIndex = document.createElement("a");
aIndex.classList.add("board__index-link");
const spanIndexText = document.createElement("span");
spanIndexText.classList.add("board__index");
spanIndexText.textContent = i + 1;
aIndex.appendChild(spanIndexText);
indexContainer.appendChild(aIndex);
aIndex.addEventListener("click", () => {
showBoardListsNewPage(i);
});
}
}
});
}
찾아보고 검색하는 중에 얻게 되는 정보는 대부분 왜 localstorage를 사용을 비추하는지 대한 정보들이였다.
말 그대로의 나의 local환경에 저장하는 data이며 나만 볼 수 있다.
당연하게도 데이터 만료 기간이 없기 때문에 데이터 저장 시 만료기간을 설정할 수 없으며,
영구적으로 데이터가 저장 되기 때문에 데이터를 삭제하기 위해서는 직접 삭제를 해야된다.
지속적인 데이터를 저장하기에 좋지만 로그인 정보와 같은 중요 데이터는 절대 저장 해서는 안된다.
브라우저 세션 간에 공유가 가능하다고 한다.
쉽게 말해 브라우저 새창을 열면 두개 모두 localStorage에 동일한 데이터를 가지고 있다.
localStorage에 저장한 데이터는 프로토콜, 도메인별로 구분한다.
예를들어, http://localhost:8080에 localStorage에 저장된 데이터는 https://localhost:8080에 localStorage에는 데이터가 저장되지 않는다.
또한, 도메인이 다를 경우 데이터는 공유 되지 않고 구분된다.
Cookie와 다르게 Storage(LocalStorage, SessionStorage)는 네트워크 요청 시 서버로 전송되지 않는다. 네트워크 트래픽 비용을 줄여주기 때문에 단순 저장소로 사용하기 좋은 장점을 가진다.
진짜 단순하게 저장용도로만 쓰는 것이다.
mongoDB로 작업을 해보고 localstorage로 하려니까 수월하지않은 부분이 있었다.
튜터님께도 여러번 질문을 하고 다시 하기를 반복했는데, 예쁘게 구현해 하고 싶다보니 계속 충돌이 일어났다.
아마도 아직 나의 js 로직 이해가 많이 부족한 탓인거 같다.
이제 뭘 써야할 지 조금은 알거 같은데 또 새로운걸 찾아보면 다시 처음 하는 기분이다.
validation check : 작성자 - pw - 내용 순으로 이어지며 입력값이 "null" 이면 alert창 팝업
test : 입력하고 enter or button 클릭 시 submit() 함수 발동
성공
array에 추가
api를 가져와서 각자 값들을 찾아 할당해 주는건 개인프로젝트 할 때 해봤어서 localStorag를 활용하여 data 저장, 불러오기를 해보고 싶었던건데 mongoDB같은 외부 db를 사용하는게 아니라 생각처럼은 안나왔다..
괜히 table에 넣어서 수정이나 조절이 손쉽 지않은 부분도 한 몫한다.
전체적인 작업 결과물과 css추가한 부분이 내일 정리해서 올려야겠다.
js 문제를 더 풀어 봐야겠다. 좀 갈피를 잡는가 싶었는데, 역시나 멀었다.