ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [WEB] 자바스크립트 게시판 CRUD
      WEB/JavaScript 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

      'WEB > JavaScript' 카테고리의 다른 글

      [JS] 자바스크립트 유효성 검사  (0) 2022.09.14
      [JS] 자바스크립트 현재 시간 가져오기  (0) 2022.09.13
      [JS] 자바스크립트 계산기  (0) 2022.09.13

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바