WEB/JavaScript
[WEB] 자바스크립트 게시판 CRUD
다콩잉
2022. 9. 11. 23:15
자바스크립트로 게시판 CRUD를 구현해보았다.
DB를 사용하지 않고 어떤 방식으로 글을 등록하고 수정하고 삭제할지 고민하던 중
localstorage 를 사용하여 브라우저에 저장할 수 있다는 것을 알게 되었다.
아직은 코드가 조금 난잡하여 수정 예정이다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>연습</title>
</head>
<body>
<table id="table" class="table table-hover">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button style=" float: right;" onclick="location.href='register.html'">글 등록</button>
<script src = "index.js"></script>
<script src = "check.js"></script>
</body>
</html>index.js
function getForm(){
var title = document.querySelector("#title").value;
var content = document.querySelector("#content").value;
window.localStorage.setItem(title, content);
}
const length = window.localStorage.length;
console.log(length);
for(var i = 0; i < length; i++){
var key = window.localStorage.key(i); // localStorage key 이름 -> 제목
var value = window.localStorage.getItem(key); // 내용
var tbody = document.querySelector("tbody");
var tr = document.createElement("tr");
tbody.appendChild(tr);
for(var j = 0; j < 2; j++){
var td = document.createElement("td");
if(j == 0){
td.innerHTML = i;
}else if(j == 1){
var form = document.createElement("form");
form.method = "get";
form.action = "check.html"
var input = document.createElement("input");
input.style.display = "none";
input.name = "num";
input.value = i;
var btn = document.createElement("input");
btn.type = "submit";
btn.value = key;
btn.style.border = 0;
btn.className = i;
btn.style.backgroundColor = "white";
btn.setAttribute("onClick", "show(this)");
td.appendChild(form);
form.appendChild(input);
form.appendChild(btn);
}
tr.appendChild(td);
}
}
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src = "index.js"></script>
</head>
<body>
<form method="post" action="index.html">
<div>
<label for="exampleFormControlInput1" class="form-label">제목</label>
<input type="text" id="title" class="form-control form-control-lg" id="exampleFormControlInput1" placeholder="">
</div>
<div>
<label for="exampleFormControlTextarea1" class="form-label">내용</label>
<textarea id="content" class="form-control form-control-lg" id="exampleFormControlTextarea1" rows="6"></textarea>
</div>
<button type="submit" onclick="getForm()">등록</button>
<button onclick="location.href='index.html'">목록</button>
</form>
</body>
</html>
check.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="margin-bottom: 30px;">
<label for="exampleFormControlInput1" class="form-label">제목</label>
<div class="title"></div>
</div>
<div>
<label for="exampleFormControlInput1" class="form-label">내용</label>
<div class="content"></div>
</div>
<div style="display: flex; justify-content: flex-start;">
<form method="get" action="update.html">
<input name="num" class="num" type="text" style="display: none;">
<button type="submit">수정</button>
</form>
<button type="button" onclick="del()">삭제</button>
<button onclick="location.href='index.html'">목록</button>
</div>
<script src = "check.js"></script>
</body>
</html>check.js
var title;
var content;
function show(self){
title = window.localStorage.key(self.className);
content = window.localStorage.getItem(title);
console.log("t: ", title);
console.log("c", content);
location.href = "check.html"
}
var num = window.location.search; // url parameter값 가져오기
console.log(num);
num.split["="];
num = num[num.length-1];
var title = window.localStorage.key(num);
var content = window.localStorage.getItem(title);
document.querySelector(".title").innerHTML = title;
document.querySelector(".content").innerHTML = content;
var hiddenP = document.querySelector(".num");
hiddenP.value = num;
console.log("dd",hiddenP.value)
function del(){
window.localStorage.removeItem(title);
location.href = "index.html"
}
update.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="margin-bottom: 30px;">
<label for="exampleFormControlInput1" class="form-label">제목</label>
<label id="title"></label>
</div>
<div>
<label for="exampleFormControlTextarea1" class="form-label">내용</label>
<textarea id="content" class="form-control form-control-lg" id="exampleFormControlTextarea1" rows="6"></textarea>
</div>
<button onclick="update()">수정</button>
<button onclick="location.href='index.html'">목록</button>
<script src = "update.js"></script>
</body>
</html>update.js
var num = window.location.search; // url parameter값 가져오기
console.log(num);
num.split["="];
num = num[num.length-1];
var title = window.localStorage.key(num);
document.querySelector("#title").innerHTML = title;
var content = window.localStorage.getItem(title);
document.querySelector("#content").value = content;
function update(){
var cnt = document.querySelector("#content").value;
window.localStorage.setItem(title, cnt);
location.href = "index.html"
}
728x90