웹 애플리케이션에서 사용자 상태 관리하는 두가지 방법
1. server session : 서버에 사용자 데이터 저장. 서버 측에서 관리하므로 보안성이 높음. 중요한 정보는 서버에만 저장되므로 클라이언트 측에서 노출되지 않는다. 세션 타임아웃 설정에 따라 일정 시간이 지나면 세션이 만료됨
2. browser session : 클라이언트의 브라우저에 저장되며(쿠키, 세션 스토리지), 클라이언트 측에 데이터가 저장되므로 보안에 취약할 수 있음
browser session에는 LocalStorage와 SessionStorage가 있당
- Local Storage(영구저장소) : 한번 저장하면 지우는 명령을 하지 않으면 계속 남아있음
- Session Storage(임시저장소) : 브라우저에 접속하는 동안에만 저장돼있음. 사이트 나가면 사라짐
storage와 cookie는 비슷하지만 다르당!
쿠키를 설정하면 웹 요청할 때마다 서버로 쿠키정보를 포함하여 전송하게 되는데
web storage는 저장된 데이터가 클라이언트에 존재하고, 서버로의 전송이 이루어지지 않아 네트워크 트래픽을 줄일 수 있당
세션은 서버에 저장되는 쿠키로, 주로 중요한 데이터를 저장할 때 사용한당(쿠키는 보안성이 낮음)
캐시는 이미지, 웹문서 등 리소스 파일들의 임시 저장소로 보통 HTTP 헤더에 따라 자동으로 관리된당. 같은 웹 페이지에 접속할 때 사용자의 pc에서 로드하므로 서버를 거치지 않아도 된당 (서버 부하 방지. 페이지 로딩 속도 개선)
쓰기 setItem
<!DOCTYPE html>
<meta charset='UTF-8'>
<script>
localStorage.setItem("BF1","육수민");
localStorage.setItem("BF2","강유정");
localStorage.setItem("BF3","박진우");
</script>
value 값을 수정하고싶을때는
같은 키값을 주면 값을 덮어씌우게 됨
localStorage.setItem("BF3","박승민");
.
읽기 getItem
localStorage는 한번 쓰면 지우기 전에는 안 지워짐
alert(localStorage.getItem("BF2"));
삭제 removeItem, clear
localStorage.removeItem("BF3");
전체 삭제
localStorage.clear();
두번째 방법
쓰기
localStorage.bpName = "양미강";
삭제
delete localStorage.bpName;
localStorage는 객체를 직접 저장할 수 없음
오직 문자열로만 저장 가능
<!DOCTYPE html>
<meta charset='UTF-8'>
<script>
localStorage.setItem("ymg",{name:"양미강", nickName:"자바스크립트 천재"});
</script>
toString 먹어서 Object로 들어감
JSON.stringify를 이용하여 객체를 문자열로 바꿔야됨(직렬화)
localStorage.setItem("ymg",JSON.stringify({name:"양미강", nickName:"자바스크립트 천재"}));
제대로 들어옴
let ymg = localStorage.getItem("ymg");
alert(ymg.nickName);
를 실행하면 undefined가 alert됨
문자열로 저장했기 때문에 꺼낼때도 문자열로 꺼냄 (문자열에 nickName이라는 메소드가 없기때문에 undefined가 뜸)
따라서 객체로 변환(역직렬화)한 후 꺼내야함
↓
let ymg = JSON.parse(localStorage.getItem("ymg"));
<!DOCTYPE html>
<meta charset='UTF-8'>
<button onclick="fTest1()">눌러방1</button>
<button onclick="fTest2()">눌러방2</button>
<script>
const myFriends = [
{name:"광제", nickName : "감자"},
{name:"윤호", nickName : "유노윤호"},
{name:"민수", nickName : "외면"},
{name:"미강", nickName : "마강"},
{name:"지영", nickName : "자천"}
];
localStorage.setItem("friends", JSON.stringify(myFriends));
</script>
function fTest1(){
// 민수 안보이게
let fr = JSON.parse(localStorage.getItem("friends"));
for(let i=0; i<fr.length; i++){
if(fr[i].name =="민수"){
fr.splice(i,1);
break;
}
}
localStorage.setItem("friends",JSON.stringify(fr));
}
function fTest2(){
//광제 nickName이 백만장자로 바뀌게
let fr = JSON.parse(localStorage.getItem("friends"));
fr.array.forEach(fr => {
if(fr.name=="광제"){
fr.nickName='백만장자';
}
});
localStorage.setItem("friends", JSON.stringify(fr));
}
첫번째 버튼 누르면 '민수'가 사라지고
두번째 버튼 누르면 '광제'의 nickName이 백만장자로 변함
예제
write.html
<hide/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>꽝 보드 글쓰기</h1>
<form action="write_action.html" method="get">
제목 <input type="text" autofocus name="title" id="" required><br>
글쓰니 <input type="text" name="writer" id="" required><br>
글쓰니 스킬 <br>
<hr>
자바스크립트<input type="checkbox" name="skills" id="" value="js" checked>
자바<input type="checkbox" name="skills" id="" value="java">
리액트<input type="checkbox" name="skills" id="" value="react">
오라클<input type="checkbox" name="skills" id="" value="oracle">
내용<br>
<textarea name="content" id="" cols="40" rows="10"></textarea> <br>
<input type="submit" value="등록">
<input type="reset" value="다시 쓰기">
</form>
</body>
</html>
jcSuccess.js
<hide/>
//억지로 네임스페이스 부여
const request = {};
let queryString = decodeURIComponent(location.href.split('?')[1]);
//1개의 값만 나옴
request.getParam = function(pKey) {
let params = queryString.split("&");
for (let i = 0; i < params.length; i++) {
let keyValue = params[i].split("=");
if (keyValue[0] == pKey) {
return keyValue[1];
}
}
}
//같은 이름으로 여러값이 넘어올때
request.getParamValues = function(pKey) {
let params = queryString.split("&");
let valArr = [];
for (let i = 0; i < params.length; i++) {
let keyValue = params[i].split("=");
if (keyValue[0] == pKey) {
valArr.push(keyValue[1]);
}
}
if (!valArr.length) { //skills 체크 안했을때
return null;
}
return valArr;
}
<hide/>
<script src="./jcSuccess.js"></script>
<script>
//값을 뽑아서
let title = request.getParam("title");
let writer = request.getParam("writer");
let content = request.getParam("content");
let skills = request.getParamValues("skills");
// 위 내용을 한 덩어리로
let gul = {
pid: Math.random().toString(36).substring(2,5), //검색 효율을 위해 pk 추가. 랜덤값을 36진수해서 인덱스 2~4까지 두글자
title, //원래는 title:title로 해야하는데 키값과 변수명이 같으면 생략 가능.
writer,
content,
skills
}
console.log("체킁", gul);
//앞으로 글을 누적해서 저장해야 하므로 배열도 필요
const bdKey = "bdTable";
let chk = localStorage.getItem(bdKey);
let gulArr = []; //빈배열
if(chk){ //null이 아니라면. 이미 쓰여진 글이 있따면
gulArr = JSON.parse(chk); //읽어온 걸 객체화
}
gulArr.push(gul); //배열에 글 추가
alert(chk);
localStorage.setItem(bdKey, JSON.stringify(gulArr));
alert("글이 잘 등록되었어용 그렇티용");
location.href="list.html"; //브라우저가 갖고있는 캐시를 계속 보여줄수있음
//location.replace("list.html"); //캐시를 서버에 다시 달라고함. 서버쪽 DB 변환이 있으면 이걸 쓰는게 맞음
</script>
글 등록할때마다 local storage에 계속 추가되는 것 확인
'js' 카테고리의 다른 글
| 볼튕기기 (0) | 2024.10.17 |
|---|---|
| react, vite (0) | 2024.10.11 |
| 복사와 참조 (0) | 2024.10.11 |
| node 설치 (4) | 2024.10.11 |
| ajax로 데이터 송수신 (0) | 2024.10.03 |