Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 |
Tags
- Java
- 예외미루기
- 컬렉션 타입
- 환경설정
- 참조형변수
- 오라클
- 정수형타입
- 생성자오버로드
- 컬렉션프레임워크
- GRANT VIEW
- 어윈 사용법
- 자바
- 사용자예외클래스생성
- abstract
- 자동차수리시스템
- 다형성
- exception
- 한국건설관리시스템
- 제네릭
- 인터페이스
- 집합_SET
- cursor문
- oracle
- 대덕인재개발원
- 추상메서드
- 메소드오버로딩
- NestedFor
- 예외처리
- EnhancedFor
- 객체 비교
Archives
- Today
- Total
거니의 velog
(7) 보강 4 본문
* Local Storage
* Session Storage
- 브라우저 => 톰캣 => DB(퍼시스턴스 레이어[영구적 저장소])
- 브라우저의 로컬 스토리지를 많이 사용. 저장 공간이 크고, 사용법도 더 좋다. 쿠키는 사용하지 않는 추세. 예전 것을 쓴다면 사용법은 알아두어야 한다.
- 위 스토리지 두개는 사용법이 같으나, 로컬은 직접 삭제해 주어야 하고, 세션은 사이트 빠져나갈 시 자동으로 삭제 된다.
- 문자열만 저장되고, 객체는 저장 불가. 항상 문자열화 해서 저장해야 한다.
* FE(Front Engineer) 백엔드, 디비 거치도 다시 프론트로 온 사람이 가장 돈을 많이 번다. 전체 플로우를 다 알기 때문.
- 사용자 컴퓨터를 사용하므로 서버 유지보수 비용이 많이 절감 됨.
[localStorage.html]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script>
// localStorage에 객체 대이타가 있을 때 수정
var testObj2 = {
name: "홍창용",
age: 30,
};
localStorage.setItem("hcy", JSON.stringify(testObj2)); // {"name":"홍창용","age":30}
// 먼저 꺼내기
console.log(JSON.parse(localStorage.getItem("hcy"))); // 문자열
var readHCY = JSON.parse(localStorage.getItem("hcy")); // HDD => Memory로 읽어 들인 것. 메모리 상으로만 바뀜.
// 수정
readHCY.age = 25;
// 문자열 덮어쓰기
localStorage.setItem("hcy", JSON.stringify(readHCY)); // Memory => HDD로 덮어쓰기. {"name":"홍창용","age":25}
/*
// JSON 유틸에는 쪼메 문제가 있는뎅, 요청을 해도 우선순위가 낮다고 안 고쳐줌!
// 문자열로 할 땐, 바깥쪽 싱글따옴표, key(속성)에도 꼬옥 쌍따옴표를 붙여야 함!
//var testStr = "{name: '시운송', present: '맛난떡'}";
var testStr = '{"name": "시운송", "present": "맛난떡"}'; // 문자열을 ''로 묶고, key-value 값을 ""을 묶어야 한다.
var testObj = JSON.parse(testStr);
console.log(testObj); // Uncaught SyntaxError: Expected property name or '}' in JSON at position 1 (line 1 column 2)
var testStr2 = { name: "시운송", present: "맛난떡" };
//console.log(testStr2); // {name: '시운송', present: '맛난떡'} // 객체로 잘 선언되기는 함. 문제 없음.
*/
/*
// 크롬 기준 사이트별로 약 5MB의 저장용량, cookie는 최대 1KB
localStorage.이름 = "전 민균"; // localStorage.setItem("이름", "전 민균");
delete localStorage.이름; // 속성 자체를 삭제
localStorage.setItem("누구얌?", "지현민"); // 쓰기
localStorage.setItem("무슨요일", "화요일"); // 쓰기
//alert("로컬 스토리지에 저장된 값의 개수 : " + localStorage.length); // 저장된 key-value 세트 갯수
localStorage.setItem("누구얌?", "소현정"); // 누구얌? 을 덮어씀
//alert(localStorage.getItem("누구얌?")); // 읽기
localStorage.removeItem("누구얌?"); // 지우기
//alert(localStorage.key(0)); // 첫번째의 key값 읽어오깅
//localStorage.clear(); // 전부 지우깅!
// 제약 사항 -> 머릿 속에 꼬옥 넣어야 함!
var myStar = {
group: "에스파",
fan: "전민균",
};
//alert("체킁 : " + myStar); // 체킁 : [object Object]
//localStorage.setItem("나의스타", myStar); // [object Object]
localStorage.setItem("나의스타", JSON.stringify(myStar)); // {"group":"에스파","fan":"전민균"}
var myArr = ["카리나", "윈터", "칼있나?"];
//localStorage.setItem("에스파", myArr); // 카리나,윈터,칼있나?
localStorage.setItem("에스파", myArr.toString()); // 카리나,윈터,칼있나?
//alert("체킁 : " + myArr); // 체킁 : 카리나,윈터,칼있나?
//localStorage.setItem("에스파", JSON.stringify(myArr)); // ["카리나","윈터","칼있나?"]
*/
// sessionStorage => localStorage와 사용법이 완전히 같지만,
// 사이트르 벗어나면 자동으로 삭제되는 점이 다름.
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>엉터리 게시판</title>
</head>
<body>
<h1>못생겼지만 중요한 게시판</h1>
<form action="write_action.html" method="get">
제목 : <input type="text" name="n_title" value="" required /><br />
글쓴이 : <input type="text" name="n_writer" value="" required /><br />
<hr />
글쓰니스킬<br />
JS <input type="checkbox" name="n_skill" value="js" />
JAVA <input type="checkbox" name="n_skill" value="java" />
SPRING <input type="checkbox" name="n_skill" value="spring" checked />
CSS <input type="checkbox" name="n_skill" value="css" />
ORACLE <input type="checkbox" name="n_skill" value="oracle" /><br />
<hr />
내용<br />
<textarea name="n_cont" cols="30" rows="10" required></textarea><br />
<button type="submit">전송</button>
</form>
<script></script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DB역할</title>
</head>
<body>
<script>
// 넘어온 값 처링
//alert(location.href); // http://localhost:8272/jsstudy/Board/write_action.html?n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
var curURL = location.href;
// 원시타입에서 Wrapper 클래스로의 자동형변환(오토박싱, 오토언박싱)
// H/W에서 용어가 시작됨. 박스에 작은 손잡이가 있다고 치자. 사장이 사원한데 13.5도로 박스를 밀라고 괴롭힘.
// 사원이 새로운 아이디어를 가져옴. 조그마한 박스에 거대한 박스를 씌움. 그 안에 미리단위로 눈금을 표시하고 손잡이를 길게 빼 놓음.
// 그 박스 안에 모터와 버튼을 만들어서 자동으로 움직이게 만듬. 이렇게 씌우는 작업을 Wrapper라고 한다.
var queryString = curURL.split("?")[1]; // 원시타입에 쩜을 찍는 순간 내부적으로 Wrapper String으로 바뀌어 메소드나 속성을 쓸 수 있음.
// var title = queryString.split("&")[0].split("=")[1]; // n_title=제목
// console.log("title : " + title); // 일일이 이렇게 언제 다함;;;;
// 좀더 정갈하고 으미있껭!
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
function getParameter(pName){
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
//var qName = items[i].split("=")[0]; // n_title
//var qValue = items[i].split("=")[1]; // 1234
var item = items[i].split("=");
if(item[0] == pName) {
return item[1];
}
}
return null; // 요런 코드 처리는 회사내부 합의에 의해서, 여기선 일단 그냥 null로 처리.
}
// 함수 동작여부 체킁!
alert(getParameter("n_title")); // 1234
alert(getParameter("n_writer")) // 4567
alert(getParameter("n_cont")); // 123
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DB역할</title>
</head>
<body>
<script>
// 넘어온 값 처링
//alert(location.href); // http://localhost:8272/jsstudy/Board/write_action.html?n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
var curURL = location.href;
// 원시타입에서 Wrapper 클래스로의 자동형변환(오토박싱, 오토언박싱)
// H/W에서 용어가 시작됨. 박스에 작은 손잡이가 있다고 치자. 사장이 사원한데 13.5도로 박스를 밀라고 괴롭힘.
// 사원이 새로운 아이디어를 가져옴. 조그마한 박스에 거대한 박스를 씌움. 그 안에 미리단위로 눈금을 표시하고 손잡이를 길게 빼 놓음.
// 그 박스 안에 모터와 버튼을 만들어서 자동으로 움직이게 만듬. 이렇게 씌우는 작업을 Wrapper라고 한다.
var queryString = curURL.split("?")[1]; // 원시타입에 쩜을 찍는 순간 내부적으로 Wrapper String으로 바뀌어 메소드나 속성을 쓸 수 있음.
// var title = queryString.split("&")[0].split("=")[1]; // n_title=제목
// console.log("title : " + title); // 일일이 이렇게 언제 다함;;;;
// 좀더 정갈하고 으미있껭!, 1개만 넘어오는 값
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
/*
function getParameter(pName){
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
//var qName = items[i].split("=")[0]; // n_title
//var qValue = items[i].split("=")[1]; // 1234
var item = items[i].split("=");
if(item[0] == pName) {
return item[1];
}
}
return null; // 요런 코드 처리는 회사내부 합의에 의해서, 여기선 일단 그냥 null로 처리.
}
// 함수 동작여부 체킁!
//alert(getParameter("n_title")); // 1234
//alert(getParameter("n_writer")) // 4567
//alert(getParameter("n_cont")); // 123
alert(getParameter("n_skill")); // 여러개 넘어오는 n_skill? 맨 앞에 1개만 찍힘.
*/
// 여러 개 넘어 오는 값
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=124123124
function getParameterValues(pName){
var schRslt = []; // 찾은 걸 담을 빈 배열
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
var item = items[i].split("=");
if(item[0] == pName) {
schRslt.push(item[1]);
}
}
if(!schRslt.length) {
return null;
}
return schRslt;
}
//console.log(getParameterValues("n_skill")); // ['java', 'spring']
//alert(getParameterValues("n_skill")); // java,spring
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DB역할</title>
</head>
<body>
<script>
// 넘어온 값 처링
//alert(location.href); // http://localhost:8272/jsstudy/Board/write_action.html?n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
var curURL = location.href;
// 원시타입에서 Wrapper 클래스로의 자동형변환(오토박싱, 오토언박싱)
// H/W에서 용어가 시작됨. 박스에 작은 손잡이가 있다고 치자. 사장이 사원한데 13.5도로 박스를 밀라고 괴롭힘.
// 사원이 새로운 아이디어를 가져옴. 조그마한 박스에 거대한 박스를 씌움. 그 안에 미리단위로 눈금을 표시하고 손잡이를 길게 빼 놓음.
// 그 박스 안에 모터와 버튼을 만들어서 자동으로 움직이게 만듬. 이렇게 씌우는 작업을 Wrapper라고 한다.
var queryString = curURL.split("?")[1]; // 원시타입에 쩜을 찍는 순간 내부적으로 Wrapper String으로 바뀌어 메소드나 속성을 쓸 수 있음.
// URL 인코딩/디코딩, 일반인에게만 모름, 웹 하는 사람들에겐 보안개념 1도 없음.
// 인코딩 함수 : escape, encodeURI, encodeURIComponent
// 디코딩 함수 : unescape, decodeURI, decodeURIComponent
// var title = queryString.split("&")[0].split("=")[1]; // n_title=제목
// console.log("title : " + title); // 일일이 이렇게 언제 다함;;;;
// 좀더 정갈하고 으미있껭!, 1개만 넘어오는 값
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
/*
function getParameter(pName){
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
//var qName = items[i].split("=")[0]; // n_title
//var qValue = items[i].split("=")[1]; // 1234
var item = items[i].split("=");
if(item[0] == pName) {
return item[1];
}
}
return null; // 요런 코드 처리는 회사내부 합의에 의해서, 여기선 일단 그냥 null로 처리.
}
// 함수 동작여부 체킁!
//alert(getParameter("n_title")); // 1234
//alert(getParameter("n_writer")); // 4567
//alert(getParameter("n_cont")); // 123
alert(getParameter("n_skill")); // 여러개 넘어오는 n_skill? 맨 앞에 1개만 찍힘.
*/
// 여러 개 넘어 오는 값
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=124123124
function getParameterValues(pName){
var schRslt = []; // 찾은 걸 담을 빈 배열
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
var item = items[i].split("=");
if(item[0] == pName) {
schRslt.push(item[1]);
}
}
if(!schRslt.length) {
return null;
}
return schRslt;
}
//console.log(getParameterValues("n_skill")); // ['java', 'spring']
alert(getParameterValues("n_skill")); // java,spring
// n_title=한글제목&n_writer=한글쓴이&n_skill=spring&n_skill=css&n_skill=oracle&n_cont=한글내용으로
alert(decodeURIComponent(getParameterValues("n_title")));
alert(decodeURIComponent(getParameterValues("n_writer")));
alert(decodeURIComponent(getParameterValues("n_cont")));
//alert(getParameterValues("n_skills")); // null
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DB역할</title>
</head>
<body>
<script>
// 넘어온 값 처링
//alert(location.href); // http://localhost:8272/jsstudy/Board/write_action.html?n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
var curURL = location.href;
// 원시타입에서 Wrapper 클래스로의 자동형변환(오토박싱, 오토언박싱)
// H/W에서 용어가 시작됨. 박스에 작은 손잡이가 있다고 치자. 사장이 사원한데 13.5도로 박스를 밀라고 괴롭힘.
// 사원이 새로운 아이디어를 가져옴. 조그마한 박스에 거대한 박스를 씌움. 그 안에 미리단위로 눈금을 표시하고 손잡이를 길게 빼 놓음.
// 그 박스 안에 모터와 버튼을 만들어서 자동으로 움직이게 만듬. 이렇게 씌우는 작업을 Wrapper라고 한다.
var queryString = curURL.split("?")[1]; // 원시타입에 쩜을 찍는 순간 내부적으로 Wrapper String으로 바뀌어 메소드나 속성을 쓸 수 있음.
// URL 인코딩/디코딩, 일반인에게만 모름, 웹 하는 사람들에겐 보안개념 1도 없음.
// 인코딩 함수 : escape, encodeURI, encodeURIComponent
// 디코딩 함수 : unescape, decodeURI, decodeURIComponent
// var title = queryString.split("&")[0].split("=")[1]; // n_title=제목
// console.log("title : " + title); // 일일이 이렇게 언제 다함;;;;
// 좀더 정갈하고 으미있껭!, 1개만 넘어오는 값
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
function getParameter(pName){
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
//var qName = items[i].split("=")[0]; // n_title
//var qValue = items[i].split("=")[1]; // 1234
var item = items[i].split("=");
if(item[0] == pName) {
return decodeURIComponent(item[1]);
}
}
return null; // 요런 코드 처리는 회사내부 합의에 의해서, 여기선 일단 그냥 null로 처리.
}
// 함수 동작여부 체킁!
alert(getParameter("n_title")); // 1234
alert(getParameter("n_writer")); // 4567
alert(getParameter("n_cont")); // 123
alert(getParameter("n_skill")); // 여러개 넘어오는 n_skill? 맨 앞에 1개만 찍힘.
// 여러 개 넘어 오는 값
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=124123124
function getParameterValues(pName){
var schRslt = []; // 찾은 걸 담을 빈 배열
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
var item = items[i].split("=");
if(item[0] == pName) {
schRslt.push(decodeURIComponent(item[1]));
}
}
if(!schRslt.length) {
return null;
}
return schRslt;
}
//console.log(getParameterValues("n_skill")); // ['java', 'spring']
alert(getParameterValues("n_skill")); // java,spring
// n_title=한글제목&n_writer=한글쓴이&n_skill=spring&n_skill=css&n_skill=oracle&n_cont=한글내용으로
alert(getParameterValues("n_title"));
alert(getParameterValues("n_writer"));
alert(getParameterValues("n_cont"));
//alert(getParameterValues("n_skills")); // null
</script>
</body>
</html>* 함수 안에다가 decodeURIComponent()을 밀어 넣었다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DB역할</title>
</head>
<body>
<script>
// 넘어온 값 처링
//alert(location.href); // http://localhost:8272/jsstudy/Board/write_action.html?n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
var curURL = location.href;
// 원시타입에서 Wrapper 클래스로의 자동형변환(오토박싱, 오토언박싱)
// H/W에서 용어가 시작됨. 박스에 작은 손잡이가 있다고 치자. 사장이 사원한데 13.5도로 박스를 밀라고 괴롭힘.
// 사원이 새로운 아이디어를 가져옴. 조그마한 박스에 거대한 박스를 씌움. 그 안에 미리단위로 눈금을 표시하고 손잡이를 길게 빼 놓음.
// 그 박스 안에 모터와 버튼을 만들어서 자동으로 움직이게 만듬. 이렇게 씌우는 작업을 Wrapper라고 한다.
var queryString = curURL.split("?")[1]; // 원시타입에 쩜을 찍는 순간 내부적으로 Wrapper String으로 바뀌어 메소드나 속성을 쓸 수 있음.
// URL 인코딩/디코딩, 일반인에게만 모름, 웹 하는 사람들에겐 보안개념 1도 없음.
// 인코딩 함수 : escape, encodeURI, encodeURIComponent
// 디코딩 함수 : unescape, decodeURI, decodeURIComponent
// var title = queryString.split("&")[0].split("=")[1]; // n_title=제목
// console.log("title : " + title); // 일일이 이렇게 언제 다함;;;;
var request = {}; // 네임스페이스를 빈 객체, 사용자요청을 처리할 객체의 의미
// 좀더 정갈하고 으미있껭!, 1개만 넘어오는 값
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
request.getParameter = function(pName){
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
//var qName = items[i].split("=")[0]; // n_title
//var qValue = items[i].split("=")[1]; // 1234
var item = items[i].split("=");
if(item[0] == pName) {
return decodeURIComponent(item[1]);
}
}
return null; // 요런 코드 처리는 회사내부 합의에 의해서, 여기선 일단 그냥 null로 처리.
}
// 함수 동작여부 체킁!
alert(request.getParameter("n_title")); // 1234
alert(request.getParameter("n_writer")); // 4567
alert(request.getParameter("n_cont")); // 123
alert(request.getParameter("n_skill")); // 여러개 넘어오는 n_skill? 맨 앞에 1개만 찍힘.
// 여러 개 넘어 오는 값
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=124123124
request.getParameterValues = function(pName){
var schRslt = []; // 찾은 걸 담을 빈 배열
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
var item = items[i].split("=");
if(item[0] == pName) {
schRslt.push(decodeURIComponent(item[1]));
}
}
if(!schRslt.length) {
return null;
}
return schRslt;
}
//console.log(getParameterValues("n_skill")); // ['java', 'spring']
alert(request.getParameterValues("n_skill")); // java,spring
// n_title=한글제목&n_writer=한글쓴이&n_skill=spring&n_skill=css&n_skill=oracle&n_cont=한글내용으로
alert(request.getParameterValues("n_title"));
alert(request.getParameterValues("n_writer"));
alert(request.getParameterValues("n_cont"));
//alert(getParameterValues("n_skills")); // null
</script>
</body>
</html>* 자바의 request 객체에 getParameter(), getParameterValues()를 구현해 본 것이다.
[JS 모듈 만들기]
// 공통으로 쓸 함수를 모으깅 보통 util.js
// URL 인코딩/디코딩, 일반인에게만 모름, 웹 하는 사람들에겐 보안개념 1도 없음.
// 인코딩 함수 : escape, encodeURI, encodeURIComponent
// 디코딩 함수 : unescape, decodeURI, decodeURIComponent
// var title = queryString.split("&")[0].split("=")[1]; // n_title=제목
// console.log("title : " + title); // 일일이 이렇게 언제 다함;;;;
var request = {}; // 네임스페이스를 빈 객체, 사용자요청을 처리할 객체의 의미
// 좀더 정갈하고 으미있껭!, 1개만 넘어오는 값
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
request.getParameter = function(pName){
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
//var qName = items[i].split("=")[0]; // n_title
//var qValue = items[i].split("=")[1]; // 1234
var item = items[i].split("=");
if(item[0] == pName) {
return decodeURIComponent(item[1]);
}
}
return null; // 요런 코드 처리는 회사내부 합의에 의해서, 여기선 일단 그냥 null로 처리.
}
// 여러 개 넘어 오는 값
// n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=124123124
request.getParameterValues = function(pName){
var schRslt = []; // 찾은 걸 담을 빈 배열
var items = queryString.split("&");
for(var i=0; i<items.length; i++) {
var item = items[i].split("=");
if(item[0] == pName) {
schRslt.push(decodeURIComponent(item[1]));
}
}
if(!schRslt.length) {
return null;
}
return schRslt;
}<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DB역할</title>
<script src="./jsp.js"></script>
</head>
<body>
<script>
// 넘어온 값 처링
//alert(location.href); // http://localhost:8272/jsstudy/Board/write_action.html?n_title=1234&n_writer=4567&n_skill=java&n_skill=spring&n_cont=123
var curURL = location.href;
// 원시타입에서 Wrapper 클래스로의 자동형변환(오토박싱, 오토언박싱)
// H/W에서 용어가 시작됨. 박스에 작은 손잡이가 있다고 치자. 사장이 사원한데 13.5도로 박스를 밀라고 괴롭힘.
// 사원이 새로운 아이디어를 가져옴. 조그마한 박스에 거대한 박스를 씌움. 그 안에 미리단위로 눈금을 표시하고 손잡이를 길게 빼 놓음.
// 그 박스 안에 모터와 버튼을 만들어서 자동으로 움직이게 만듬. 이렇게 씌우는 작업을 Wrapper라고 한다.
var queryString = curURL.split("?")[1]; // 원시타입에 쩜을 찍는 순간 내부적으로 Wrapper String으로 바뀌어 메소드나 속성을 쓸 수 있음.
var tblName = "myGesi"; // 로컬스토리지 키 값, 테이블 저장형태는 배열이 되어야 함.
var datas = localStorage.getItem(tblName);
var pid = 1; // 디폴트값 1
if(!datas) { // 데이터가 아예 없는 경우, 첫 글이 저장되는 경우이다.
datas = []; // 빈 배열
}else {
datas = JSON.parse(datas); // 배열 문자열을 실제 배열로
pid = datas[datas.length-1].pid + 1;
}
var title = request.getParameter("n_title");
var writer = request.getParameter("n_writer");
var skills = request.getParameterValues("n_skill");
var cont = request.getParameter("n_cont");
// 빅데이터는 객체형 DB를 쓰고, 일반 업무나 깐깐하고 엄격한 규칙이 적용되어야 하는 업무는 관계형 DB를 적용하도록 나뉨.
// 넘어온 내용을 덩어리(객체)로 맹글깅
/*
var newGul = {
title : title,
writer : writer,
skills : skills,
cont : cont
};
*/
// primaey-key 부여. 테이블 풀스캔으로 하지 않고, 인덱스 스캔으로 검색 속도를 향싱시키기 위함이다.
var newGul = {
pid,
title, // key 값과 key에 할당할 값의 변수명이 동일할 때 생략가능
writer,
skills,
cont
};
console.log("누느로 체킁 : ", newGul); // {title: '한글제목', writer: '한글쓴이', skills: Array(3), cont: '한글내용으로+다른+글자'}
datas.push(newGul); // 배열에 추가
// 로컬스토리지에 문자열화(시리얼라이즈)해서 저장
localStorage.setItem(tblName, JSON.stringify(datas));
alert("그리 그리 잘 저장되었어용"); // 사용자를 위해 억지 메시지 한개
location.href = "list.html"; // 리스트 페이지로 이동, 브라우저 캐시를 허용하여 이용할 수도 있음.
//location.replace("list.html"); // 리스트 페이지로 이동, 꼭 서버에 새로 요청을 보냄!
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리스트 페이지</title>
</head>
<body>
<h1>못생긴 게시판</h1>
<div id="list"></div>
<script>
function f_over(pThis){
pThis.style.backgroundColor = "pink";
}
function f_out(pThis){
pThis.style.backgroundColor = "white";
}
const myList = document.querySelector("#list");
const tblName = "myGesi";
var gulList = JSON.parse(localStorage.getItem(tblName));
// Master-Detail-Pattern
var tblStr = `<table border="1">`;
tblStr += `<tr>
<th>PID</th>
<th>제목</th>
<th>글쓴이</th>
<th>스킬</th>
</tr>`;
for(var i=0; i<gulList.length; i++) {
var gul = gulList[i];
tblStr += `<tr onmouseover="f_over(this)" onmouseout="f_out(this)">
<td>${gul.pid}</td>
<td>${gul.title}</td>
<td>${gul.writer}</td>
<td>${gul.skills}</td>
</tr>`;
}
tblStr += `</table>`;
tblStr += `<a href="write.html">글쓰깅</a>`; // 글쓰기로 가는 a 링크 괜히 넣깅
myList.innerHTML = tblStr;
</script>
</body>
</html>
'대덕인재개발원 > 대덕인재개발원_final project' 카테고리의 다른 글
| (9) 보강 6 (0) | 2023.12.28 |
|---|---|
| (8) 보강 5 (0) | 2023.12.27 |
| (6) 토요일 수업 1 (0) | 2023.12.23 |
| (5) 보강 3 (0) | 2023.12.22 |
| (4) 보강 2 (0) | 2023.12.21 |
'대덕인재개발원/대덕인재개발원_final project' Related Articles
more
