앞서 글을 작성하고 LocalStorage에 저장한 글들을 불러와
게시판 글 list를 구현해봅니다.
<html>
<head>
<meta charset="UTF-8">
<title>게시판 글 목록</title>
</head>
<body>
<div id="wrapper">
<div id="gList"></div>
</div>
</body>
<script>
const tblName ="bbs_data";
// 로컬스토리지에서 값을 가져와 JSON으로 parsing 합니다.
let dataArr = JSON.parse(localStorage.getItem(tblName));
function fList() {
let tblStr = `<table border=1>`;
tblStr += `<tr><th>글번호</th><th>제목</th><th>작성자</th><th>날짜</th>`;
for(let i = 0; i < dataArr.length; i++) {
tblStr += `<tr>`;
tblStr += `<td>${dataArr[i].num}</td>`;
tblStr += `<td><a onclick="datail('${dataArr[i].num}')">${dataArr[i].title}</a></td>`;
tblStr += `<td>${dataArr[i].writer}</td>`;
tblStr += `<td>${dataArr[i].date}</td>`;
tblStr += `</tr>`;
}
tblStr += `</table>`;
tblStr += `<br><a href="write.html">새글작성</a>`;
gList.innerHTML = tblStr;
}
window.addEventListener("DOMContentLoaded", fList);
</script>
</html>
다음과 같이 구현됩니다.
'Study Hard > HW' 카테고리의 다른 글
| [스프링MVC] 이클립스 Base패키지 명 변경하기 (0) | 2023.07.08 |
|---|---|
| SVN 커밋 방법 및 커밋가이드 (0) | 2023.07.03 |
| [Only자바스크립트]로 게시판 만들기(1) - 글쓰기 (CRUD) (0) | 2023.06.26 |
| [자바스크립트] Form태그 체크박스 3개 이상 체크 못하게하기 (0) | 2023.06.26 |
| Web의 LocalStorage를 알아보자 (0) | 2023.06.26 |
댓글