[HTML5] - 15 - 게시글 작성 기능 만드는 법
728x90
반응형
728x90
#주의#
이 글은 강의 글이 아니다.
틀린 부분, 깔끔하지 못한 부분 있을 수 있다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.
이전 14번 글에서 작성했던 코드에 오류가 있다.
게시글을 작성하면 저장되지 않았다.
바로 수정해 주도록 하자.
<script> 태그를 갈아엎어주자.
<script>
function getPosts() {
var posts = localStorage.getItem("posts");
if (posts) {
document.getElementById("posts").innerHTML = posts;
}
}
function savePosts() {
var postsDiv = document.getElementById("posts");
localStorage.setItem("posts", postsDiv.innerHTML);
}
function addPost() {
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
var postDiv = document.createElement("div");
postDiv.className = "card my-3";
postDiv.innerHTML = `
<div class="card-body">
<h3 class="card-title">${title}</h3>
<p class="card-text">${content}</p>
<img class="card-img-bottom" src="images/3.webp" alt="이미지">
<button type="button" class="btn btn-danger my-3">삭제</button>
</div>
`;
postDiv.querySelector(".btn-danger").addEventListener("click", function() {
postDiv.remove();
savePosts();
});
var postsDiv = document.getElementById("posts");
postsDiv.insertBefore(postDiv, postsDiv.firstChild);
savePosts();
document.getElementById("title").value = "";
document.getElementById("content").value = "";
}
getPosts();
</script>
갈아엎었다면 게시글이 저장될 것이다.
웹페이지를 나가도, 새로고침 해도 유지될 것이다.
전의 코드에서 addPost() 함수가 수정되었다.
또한 getPosts() 함수가 추가되어 로컬 스토리지에서 게시글을 불러오는 기능이 추가했다.
마지막으로 getPosts() 함수를 호출하여 페이지가 로드될 때마다 저장된 게시글을 불러와서 화면에 출력하도록 구현했다.
역시나 혹시나 하는 마음에 전체 코드를 아래에 적어놓겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이리의 맥 이야기</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body style="background-color: black;">
<div class="hero text-center text-white py-5">
<h1 class="display-4">이리의 맥 이야기</h1>
<h2>컴온!!!!</h2>
</div>
<div class="container my-5">
<form onsubmit="addPost(); return false;">
<div class="form-group">
<label for="title">제목</label>
<input type="text" class="form-control" id="title" name="title" placeholder="제목을 입력하세요...">
</div>
<div class="form-group">
<label for="content">내용</label>
<textarea class="form-control" id="content" name="content" placeholder="내용을 입력하세요..." rows="8"></textarea>
</div>
<button type="submit" class="btn btn-primary">게시글 작성</button>
</form>
<div id="posts"></div>
<nav>
<ul class="pagination justify-content-center my-5">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">이전</a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">다음</a>
</li>
</ul>
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
function getPosts() {
var posts = localStorage.getItem("posts");
if (posts) {
document.getElementById("posts").innerHTML = posts;
}
}
function savePosts() {
var postsDiv = document.getElementById("posts");
localStorage.setItem("posts", postsDiv.innerHTML);
}
function addPost() {
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
var postDiv = document.createElement("div");
postDiv.className = "card my-3";
postDiv.innerHTML = `
<div class="card-body">
<h3 class="card-title">${title}</h3>
<p class="card-text">${content}</p>
<img class="card-img-bottom" src="images/3.webp" alt="이미지">
<button type="button" class="btn btn-danger my-3">삭제</button>
</div>
`;
postDiv.querySelector(".btn-danger").addEventListener("click", function() {
postDiv.remove();
savePosts();
});
var postsDiv = document.getElementById("posts");
postsDiv.insertBefore(postDiv, postsDiv.firstChild);
savePosts();
document.getElementById("title").value = "";
document.getElementById("content").value = "";
}
getPosts();
</script>
</body>
</html>끝까지 따라오면 적어도 코딩에 대해 겁은 사라질 것이다.
겁먹지만 않아도 이길 수 있다.
겁이 사라지면 다른 코딩 언어 도전도 충분히 할 수 있다고 생각한다.
반응형
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] - 17 - Visual Studio 추천 확장 프로그램 (0) | 2023.05.05 |
|---|---|
| [HTML5]- 16 - 작성 시간 표시 기능 만드는 법 (4) | 2023.05.05 |
| [HTML5] - 14 - 부트스트랩을 이용해서 웹페이지 만드는 법 (1) | 2023.05.05 |
| [HTML5] - 13 - 로컬 스토리지 삭제 기능 만드는 법 (2) | 2023.05.05 |
| [HTML5] - 12 - 페이지네이션 기능 만드는 법 (0) | 2023.05.05 |
댓글