No DB로 순수 자바스크립트와
LocalStorage를 사용하여 CRUD 게시판을 만들어보자.
글쓰기 구현
- Form태그로 write_process.html으로 데이터값을 get방식으로 보낸다.
- write_process.html get방식의 파라미터를 Js로 추출하여 각 값들을 Json형식으로 stringify하여 LocalStorage에 저장한다.
1. write.html 작성
html소스
<div id="wrapper">
<form method="get" action="write_process.html">
<h1>JS와 LocalStorage로 게시판 만들기</h1>
제목 <input type="text" name="n_title" value="" required /><br>
작성자 <input type="text" name="n_writer" value="" required><br>
내용 <br>
<textarea name="n_cont" cols="30" rows="10"></textarea><br>
관련언어<br>
JS<input type="checkbox" name="n_skil" value="js" checked >
Java<input type="checkbox" name="n_skil" value="java" >
Oracle<input type="checkbox" name="n_skil" value="oracle">
HTML<input type="checkbox" name="n_skil" value="html" ">
CSS<input type="checkbox" name="n_skil" value="css" "><br>
<button type="submit">게시글 전송</button>
</form>
</div>
2. write_process.html 작성
html 소스
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글쓰기 처리 페이지</title>
</head>
<body></body>
<script src="./write_process.js"></script>
<script>
let title = request.getParameter('n_title');
let writer = request.getParameter('n_writer');
let cont = request.getParameter('n_cont');
let skills = request.getParameterValues('n_skil');
let gul = {
num : 0,
title : title,
writer : writer,
cont : cont,
skills : skills,
date : (new Date()).toLocaleDateString()
}
// localStorage에 저장
const tblName = "bbs_data";
let dataArr = [];
if(localStorage.getItem(tblName)) {
dataArr = JSON.parse(localStorage.getItem(tblName));
gul.num = dataArr[dataArr.length-1].num+1;
}
dataArr.push(gul);
localStorage.setItem(tblName, JSON.stringify(dataArr));
alert(`${gul.num} 번째글이 LocalStorage에 저장되었습니다.`);
location.replace("list.html");
</script>
</html>
write_process.js 소스파일
const request = {};
request.getParameter = function(pName) {
if(location.href.indexOf("?") == -1) return;
let queryString = location.href.split("?")[1]; // idx 1번째(오른쪽 문자열)이 쿼리스트링
let items = queryString.split("&");
for(let i = 0; i < items.length; i++) {
let name = items[i].split("=")[0];
let val = items[i].split("=")[1];
if(name == pName) {
return decodeURIComponent(val);
}
}
return "parameter값이 없습니다. 확인바람";
}
request.getParameterValues = function(pName) {
if(location.href.indexOf("?") == -1) return;
let queryString = location.href.split("?")[1];
let items = queryString.split("&");
let itemName = [];
for(let i = 0; i < items.length; i++) {
let name = items[i].split("=")[0];
let val = items[i].split("=")[1];
if(name == pName) {
itemName.push(decodeURIComponent(val));
}
}
if(!itemName.length) return null; // 0개일때 null 을 리턴해준다.
return itemName;
}
결과물
다음과 같이 작성하게되면
- write_process 파일로 쿼리스트링이 전달되고,
- 내부적으로 Js가 LocalStorage에 저장하여 처리합니다.
- 개발자 도구를 통해서 Application - LocalStorage에 들어가면 다음과 같이 값이 저장된걸 확인할 수 있습니다.
- 쿼리스트링으로 값이 전달되기때문에 띄어쓰기(스페이스)의 경우 값이 +로 변환될 수 있습니다. (parcing을 통해해결)
'Study Hard > HW' 카테고리의 다른 글
| SVN 커밋 방법 및 커밋가이드 (0) | 2023.07.03 |
|---|---|
| [Only자바스크립트]로 게시판 만들기(2) - 글 List 구현 (CRUD) (0) | 2023.06.27 |
| [자바스크립트] Form태그 체크박스 3개 이상 체크 못하게하기 (0) | 2023.06.26 |
| Web의 LocalStorage를 알아보자 (0) | 2023.06.26 |
| [스프링시큐리티] 프로젝트 환경셋팅 및 로그인 진행 (0) | 2023.06.26 |
댓글