login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
#app{
margin: auto;
margin-top: 60px;
width: 60%;
border: 3px solid #8ac007;
padding: 10px;
}
</style>
</head>
<body>
<h1>Login</h1>
<div id="app">
<table border="1">
<tr>
<td>์์ด๋</td>
<td>
<input type="text" id="id" placeholder="์์ด๋์
๋ ฅ" size="20">
</td>
</tr>
<tr>
<td>ํจ์ค์๋</td>
<td>
<input type="text" id="pwd" placeholder="ํจ์ค์๋์
๋ ฅ" size="20">
</td>
</tr>
<tr>
<td colspan="2">
<button type="button" id="login">login</button>
<button type="button" id="account">ํ์๊ฐ์
</button>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#login').click(function() {
$.ajax({
url:"http://localhost:3000/login",
type:'post',
data:{ id:$('#id').val(), pwd:$('#pwd').val() },
success:function(data){
// alert('success');
if(data == ''){
alert('login fail');
}else{
alert('login success');
sessionStorage.setItem("login", JSON.stringify(data));
location.href = "bbslist.html";
}
},
error:function(){
alert('error');
}
});
});
$('#account').click(function() {
location.href = "account.html";
});
});
</script>
</body>
</html>
sessionStorage.setItem( );
์น์์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋ ๋ฐฉ๋ฒ ์ค ์๋ฒ๊ฐ ์๋ ํด๋ผ์ด์ธํธ์์ ๊ฐ๋ฅํ ๋ฐฉ๋ฒ์ ์์๋ณด๋ ค๊ณ ํฉ๋๋ค.
์น์ฌ์ดํธ์ ์ ๋ณด๋ฅผ ์ ์ฅํ๊ธฐ ์ํด์ ๋ฐ๋์ ์๋ฒ๊ฐ ํ์ํ ๊ฒ์ ์๋๋๋ค. ์ฌ์ฉ ๋ชฉ์ ์ ๋ฐ๋ผ ํด๋ผ์ด์ธํธ ์ ์ฅ์ ์ญ์ ์ข์ ์ญํ ์ ํ ์ ์์ต๋๋ค. ์ผ๋ฐ์ ์ผ๋ก ํด๋ผ์ด์ธํธ ์ ์ฅ์๋ฅผ ์๊ฐํ๋ฉด ๊ฐ์ฅ ๋จผ์ ์ฟ ๊ธฐ ์ ์ฅ์๋ฅผ ๋ ์ฌ๋ฆฌ๊ฒ ์ง๋ง html5์๋ ์ข ๋ ํจ๊ณผ์ ์ธ ํด๋ผ์ด์ธํธ ์ ์ฅ ๊ณต๊ฐ์ ์ ๊ณตํ๋๋ฐ ์ด๋ค ๊ฒ์ด ์๋์ง ์์๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ์ฃ .
! localStorage, sessionStorage API ์์๋ณด๊ธฐ
html5์์๋ ์ข ๋ ์ฝ๊ณ ๊ฐ๋จํ ์ ์ฅ์ ์ ๊ณต์ ์ํด ์๋ก์ด localStorage์ sessionStorage API๋ฅผ ์ ๊ณตํฉ๋๋ค. ๋ ๋ค ์ ์ฅ ๊ณต๊ฐ์ผ๋ก ์ฌ์ฉํ ์ ์๋๋ฐ ์ด ๋์ ๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ด๋ผ๋ฉด ์ ์ฅ์๋ก์์ ๊ธฐ๋ฅ์ ๋๋ถ๋ถ ๋์ผํ๋ฉฐ ๋จ์ง sessionStorage์ ๊ฒฝ์ฐ ์ธ์
์ด ์ข
๋ฃ๋๋ฉด ์ ์ฅ๋ ๋ฐ์ดํฐ๋ ํจ๊ป ์ฌ๋ผ์ง ๋ค๋ ์ ์ด ๋ค๋ฅธ ์ ์
๋๋ค. ๊ทธ๋ ๋ค๋ฉด ์ด ๋ฉ์๋๋ ์ด๋ค ๊ฒฝ์ฐ์ ์ฌ์ฉํ ์ ์์๊น์? ์ฟ ํค๋ฅผ ํฌํจํด ์๋ก์ ์ฅ๋จ์ ์ ๋ํ์ฌ ๋น๊ตํ๋ฉฐ ์์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
# ์ฟ ํค, ์๋ฒ ์ ์ฅ์, localStorage, sessionStorage ์ฐจ์ด์ ๋ฐ ์ฅ๋จ์
์ฟ ํค์ ๊ฒฝ์ฐ ์ ์ฅ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ํฌ๊ธฐ๊ฐ ๊ฐ์ฅ ์๊ณ ํ๋์ ํ
์คํธ ํํ๋ก ์ ์ฅ๋๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๋น๊ต์ ๊ฐ๋จํ ํ
์คํธ ํ์
์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๋๋ฐ ์ฉ์ดํ๋ค. ์ด๋ฐ ๊ฐ์ผ๋ก๋ ํ์
์ ์ด๋ฆ์ ์๋ก ๋ค ์ ์๋ค. ํ์
์ ๊ฒฝ์ฐ 24์๊ฐ ๋์ ๋์ํ์ง ์๋๋ก... ์ฆ ์ด์ง ์๋๋ก ์ค์ ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ ์ด๋ ์ฟ ํค์ ๋ณ์๋ฅผ ์ ์ฅํ๊ณ 24์๊ฐ์ ๋ง๋ฃ์๊ฐ์ ์ค์ ํ๋ ๊ฒ์ด ์ข๋ค.
์๋ฒ์ ์ฅ์๋ ๋ฐ์ดํฐ์ ๋๊ธฐํ๊ฐ ํ์ํ๊ธฐ ๋๋ฌธ์ ๊ผญ ํ์ํ ๊ฒฝ์ฐ๊ฐ ์๋๋ผ๋ฉด ์ ์ก์ ์ต์ํ ํ๋ ๊ฒ์ด ์ข์ ๊ฒ์ด๋ค. ์ด๋ฐ ์ด์ ๋ก ์๋ฒ ์ ์ฅ์๋ ๋ฐ์ดํฐ์ ํฌ๊ธฐ๊ฐ ๋งค์ฐ ํฌ๊ฑฐ๋ ๋ฐ๋์ ์ ์ฅํด์ผ ํ๋ ๊ฒฝ์ฐ์๋ง ์ฌ์ฉ๋๋ค.
๋ฐ์ดํฐ๊ฐ ํฌ๊ธฐ๋ ๋ง๋ฃ์๊ฐ์ ๊ณ ๋ คํ์๋ ์ ์ ์ฅ์์ ์ค๊ฐ ์ ๋์ ์ ๋งคํ ๊ฒฝ์ฐ๊ฐ ์์ ์ ์๋ค. ์ ์ฅ์๊ฐ ํ์ํ์ง๋ง ๋ค์์ ์ปฌ๋ผ์ด ํ์ํ ๊ฒฝ์ฐ๊ฐ ์๋๋ง ๋จ์ํ ํํ๋ผ๋ฉด localStorage, sessionStorage๋ฅผ ์ฌ์ฉํ๋๊ฒ ํจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ์ด๋ค.
! localStorage, sessionStorage๋ฅผ ์ด๋ค ๊ฒฝ์ฐ์ ์ฌ์ฉํ ๊น
๋๋ถ๋ถ์ ๋ฐ์ดํฐ์ ๊ฒฝ์ฐ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ ์ฅํ๋ฏ๋ก ๋ก์ปฌ ๋ฐ ์ธ์
์คํ ๋ฆฌ์ง๊ฐ ์ฌ์ฉ๋๋ ๊ณณ์ ๊ทธ๋ฆฌ ๋ง์ง ์๋ค. ๋๋ถ๋ถ ์์์ ์ธ ์ฉ๋ ๋๋ ์บ์, history ๊ธฐ๋ฅ์ ์ํ์ฌ ์ฌ์ฉ๋๋ค. ์๋์ ๊ฒฝ์ฐ๊ฐ ๊ทธ ์์ด๋ค.
- ๊ธ ์์ฑ ์ค๊ฐ ์ค๊ฐ์ ์์ด๋ฒ๋ฆฌ์ง ์๊ธฐ ์ํ ์์ ์ ์ฅ์ฉ๋
- ์ฅ๋ฐ๊ตฌ๋๋ ์ข์ํ๋ ์ฝํ ์ธ ๋ฑ ์์๋ก ๋ณ๊ฒฝ๋๋ ๊ฒฝ์ฐ
- ๋ฐฉ๋ฌธ์์ ์ด๋ ๊ฒฝ๋ก๋ฅผ ์ ์ฅํ์๋ค๊ฐ ์ด๋ํ ๊ฒฝ์ฐ
- ๊ทธ ์ธ ์๋ฒ์ ๋ฐ๋์ ์ ์ฅํ ํ์๊ฐ ์๋ ๊ฒฝ์ฐ
๊ทธ๋ผ ์๋์์๋ ์์ ๋ฅผ ํตํ์ฌ ๋์ฑ ์์ธํ๊ฒ ์์๋ณด์.
# sessionStorage ์์ ๋ณด๊ธฐ
์ธ์
์ ๊ธฐ์ค์ผ๋ก ๋ฐ์ดํฐ๊ฐ ์ ์ฅ ๋ฐ ์ ์ง๋๊ธฐ ๋๋ฌธ์ ์ด ๊ฐ์ฒด์ ์ ์ฅ๋ ๊ฐ์ ์ผ์์ ์ธ ์๋ช
์ ๊ฐ์ง๊ฒ๋๋ค. ๋ง์ฝ ์ธ์
์ด ์ข
๋ฃ๋๋ ๊ฒฝ์ฐ... ๋ธ๋ผ์ฐ์ ๋ฅผ ๋ซ๊ฑฐ๋ ์ผ์ ์๊ฐ ์๋ฌด๋ฐ ๋์๋ ํ์ง ์๋๋ค๋ฉด ๋น์ฐํ ์ ์ฅ๋ ๊ฐ์ ์ญ์ ๋ ๊ฒ์ด๋ค.
๋ง์ฝ ๋ฐ์ดํฐ๊ฐ ์ญ์ ๋์ง ์๊ธธ ๋ฐ๋๋ค๋ฉด ์์ ๋์์๋ localStorage๋ฅผ ์ฌ์ฉํ๊ธฐ ๋ฐ๋๋ค. ์๋์ ์ฌ์ฉ๋ฐฉ๋ฒ์ localStorage์ ๊ฑฐ์ ๋์ผํ ๋ฉ์๋์ ํ๋กํผํฐ๋ฅผ ๊ฐ๋๋ค. ์ฆ, ๋์ผํ ๋ฐฉ๋ฒ์ผ๋ก ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค ํ๊ฒ ๋ค. ๊ทธ๋ผ ์๋ ์์ ๋ฅผ ์ฐธ๊ณ ํ์.
(์ฐธ๊ณ ๋ก ์ธ์
์ ์ฌ์ฉํ ์ ์ฅ๋ฐฉ๋ฒ์ ๋ณด์ ๋ฐ ์ค์ํ ๋ฐ์ดํฐ์ ๊ฒฝ์ฐ ๋ฌด๋ฐฉ๋น๋ก ๋
ธ์ถ๋๋ ๊ฒฝ์ฐ๋ฅผ ํผํ๊ธฐ ์ํด์ ์ฌ์ฉ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.)
sessionStorage.setItem("domain", "webisfree.com");
// domain์ด๋ ํค(key) ๊ฐ์ ์ฌ์ฉํ์ฌ ํด๋น ํ
์คํธ๋ฅผ ์ ์ฅํจ
sessionStorage.getItem("domain");
// ํค์ ์ ์ฅ๋ ๊ฐ์ ๋ฐํ. ์ฌ๊ธฐ์๋ webisfree.com ์ถ๋ ฅ๋จ
sessionStorage.removeItem("domain");
// domain ํค์ ๋ฐ์ดํฐ ๋ชจ๋ ์ญ์
sessionStorage.clear();
// ์ ์ฅ๋ ๋ชจ๋ ๊ฐ ์ญ์
# localStorage ์์ ๋ฐ ์ฝ๋๋ณด๊ธฐ
์์๋ ์ธ๊ธํ์ง๋ง ์ ๋๊ฐ์ง ๊ฐ์ฒด์ ์ฐจ์ด์ ์ ์ธ์
์ ๋ฐ๋ผ์ ๋ฐ์ดํฐ๊ฐ ์ ์ง๋๋๊ฐ ์๋๋๊ฐ๋ก ๊ตฌ๋ถํ ์ ์๋ค. ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ๋ ๊ฑฐ์ ๋์ผํ๋ค ํ๊ฒ ๋ค. ์๋๋ localStorage๊ฐ์ฒด์ ์ฌ์ฉ๋ก ์์ฃผ ์ฌ์ฉ๋๋ ๋ฉ์๋, ํ๋กํผํฐ๋ฅผ ํจ๊ป ์์๋ณด์.
# ๋ฐ์ดํฐ์ ์ ์ฅ setItem()ํน์ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ๊ธฐ ์ํ ๋ฐฉ๋ฒ์ผ๋ก ์๋์ ๊ฐ์ด ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ๋ฆฌํฐ๋ดํ๊ฒ ์ฌ์ฉํ๋ ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ด ๊ฐ๋ฅํ๋ค. ์๋ ์์ ๋ test๋ ์ด๋ฆ์ key๊ฐ์ ์ ํ๊ณ ์ด์ 123์ด๋ ๊ฐ์ ์ ์ฅํ๋ ์์ ์ด๋ค.
localStorage.test = '123';
localStorage.setItem('test', '123');
์ฌ๊ธฐ์ ์ฌ์ฉ๋ setItem() ๋ฉ์๋๋ ๊ฐ์ ์ ์ฅํ๋ ๊ฐ๋จํ ๋ฐฉ์์ผ๋ก key๊ฐ์ ๋งค์นญ๋ value๋ฅผ ์ธ์๋ก ๋๊ฒจ์ฃผ๋ฉด ๋๋ค. ๋งค์ฐ ๊ฐ๋จํ๊ฒ ์ ์ฅํ ์ ์๋ค. ์๋๋ ๋ฑ๋ก๋ key๊ฐ์ value๋ฅผ ์ป๊ธฐ ์ํ ๋ฐฉ๋ฒ์ด๋ค.
# ๋ฐ์ดํฐ ๋ถ๋ฌ์ค๊ธฐ, getItem()
localStorage.test;
localStorage.getItem('test');
์ญ์ ์ง์ ํค๊ฐ์ ์
๋ ฅํ๊ฑฐ๋ getItem() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ ๋ ๊ฐ์ง๊ฐ ์๋ค. ์๋๋ ํน์ key ๊ฐ์ ์ง์ฐ๋ ๋ฐฉ๋ฒ์ ๋ํ์ฌ ์์๋ณด์.
์ฐธ๊ณ ๋ก ์ ์ฒด localStorage์ ๋ด๊ฒจ์๋ ๋ชจ๋ ๊ฐ์ ํ์ธํ๋ ค๋ฉด getItem()์ ์๋ฌด๋ฐ ๊ฐ๋ ๋๊ธฐ์ง ์์ผ๋ฉด ๋ชจ๋ ์ ๋ณด๋ฅผ ๋ฐ์์ฌ ์ ์๋ค.
localStorage.getItem(); // ์ ์ฒด ๊ฐ ๋ฐ์์ค๊ธฐ
๊ทธ๋ผ ์๋๋ ๋ฐ์ดํฐ๋ฅผ ์ญ์ ํ๋ ๋ฐฉ๋ฒ์ด๋ค.
# ๋ฐ์ดํฐ ์ญ์ , removeItem()์๋๋ test๋ผ๋ ํค๊ฐ์ ์ ์ฅ๋ ๊ฐ์ ์ญ์ ํ๋ ์์ ์ด๋ค.
localStorage.removeItem('test');
// localStorage ๊ฐ์ฒด์์ ์ํ๋ ๊ฐ์ ์ง์ฐ๋ ๋ฐฉ๋ฒ
localStorage.clear();
// ํ๋ฒ์ ์ ์ฅ๋ ๋ชจ๋ ๊ฐ์ ์ญ์ ํ๋ ๋ฐฉ๋ฒ
๋ฐ์ดํฐ๋ฅผ ์ญ์ ํ ๊ฒฝ์ฐ removeItem()์ ์ฌ์ฉํ์ฌ ํ๋๋ง ์ ๊ฑฐํ ์ ์๊ณ ์๋๋ฉด ๋ชจ๋ ๊ฐ์ ์ง์ธ ์ ์๋ clear() ๋ฉ์๋๋ ์กด์ฌํ๋ค.
'์คํ๋ง Spring > ๐งถ์คํ๋ง ๋ถํธ Boot' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
์คํ๋ง ๋ถํธ๋ ๋ฌด์์ธ๊ฐ? (0) | 2021.06.25 |
---|---|
์คํ๋ง ๋ถํธ(spring boot) ์ค์น & ์ธํ (0) | 2021.06.25 |
๋๊ธ