본문 바로가기
CLASS/SERVLET

#6-3 / storage

by hingu 2024. 6. 18.
⚡ 1. local storage 사용법( - front 주로사용)

key값은 중복 불가!!
<body>
	<input type="button" value="로컬스토리지 값 가져오기" onclick="zzz()">
	<input type="button" value="로컬스토리지 삭제" onclick="abc()">
</body>

<script type="text/javascript">
	localStorage.setItem("product","냉장고"); //값 세팅
	localStorage.setItem("product1","냉장고1");
	localStorage.setItem("product2","냉장고2");
	
	function zzz(){
		var data = localStorage.getItem("product");
		console.log(data);
	}
	
	function abc(){
		localStorage.removeItem("product");
		//값만삭제 - 버튼 누르면 실시간 바로 삭제됨
		
		//localStorage.clear(); //완전 싹다 삭제
	}
</script>

 

⚡ 2. session storage 사용법(- backend 주로 사용)
<script type="text/javascript">
	sessionStorage.setItem("mid","apink");
</script>

 

 

=>

1,2파일 닫아도 localstorage도 product,냉장고 들어가있음 - 창 닫았다 켜도 계~~~~속 남아있음

∴ 아이디 비밀번호 이런거 넣으면 절~~~~~대 안됨!! 

 

session storage는 해당페이지에서만 작동 - 창 닫을시 사라짐 (해당페이지에서만 사용 가능하기때문에 백엔드가 주로 사용)

 

 

🔽 로그인 저장

https://dev-eunse.tistory.com/150   여기서 하던거를 로그인 저장기능 붙이기

⚡ localstorage 이용한 로그인 정보 저장
사실 이 기능을 실무에서 잘 만들진 않음
<body>
	<form id="frm">
		<p>회원 로그인</p>
		아이디 : <input type="text" name="uid" id="uid"><br>
		패스워드 : <input type="text" name="upass" id="upass"><br>
		<label><input type="checkbox" id="save_id">아이디 저장</label><br><br>
		<button>로그인</button>
	</form>
</body>

<script type="text/javascript">
	$(function(){
		var $st = localStorage.getItem("userid");
		if($st != null){ //값이 있을 경우
			$("#uid").val($st);
			$("#save_id").prop("checked",true);
		}
		
		$("#frm").submit(function(){
			if($("#uid").val() == "" || $("#upass").val() == ""){
				alert("id 및 패스워드를 입력하세요");
				return false;
			}else{
				$("#frm").attr("method","post");
				$("#frm").attr("action","./loginok.do");
				return true; //submit에선 이렇게 작성해도됨
			}
		});
		
		//체크박스 체크 하는순간~
		$("#save_id").click(function(){
			if($("#uid").val() == ""){
				alert("아이디 저장시 해당 아이디 값을 입력하셔야합니다.")
				$("#save_id").prop("checked",false);
			}else{
				var $k = $("#save_id").is(":checked");
				if($k == true){
					localStorage.setItem("userid",$("#uid").val());	
				}else{
					localStorage.removeItem("userid");
				}
				
			}
		})
		
	})
</script>