■ 자바스크립트에서 세션 값 읽어오기
-. 세션은 키와 값이 있는 작은 데이터의 조각이다.
-. 세션은 서버와 클라이언트에서 모두 저장할 수 있다.
-. 세션은 휘발성 데이터로, 브라우저를 종료하는 순간 모든 데이터가 삭제된다.
-. 세션은 같은 브라우저 상에서 동일한 페이지에서 이전 로그인 되었다면, 로그인 정보를 가지고 있는 형식으로 자주 사용된다.
# sessionStorage 객체의 메서드
메서드 이름
|
설명
|
setItem(key, value)
|
· 세션에 데이터를 저장한다.
|
getItem(key)
|
· 세션의 데이터를 읽어온다.
|
removeItem(key)
|
· 세션에 지정한 key 값의 데이터를 삭제한다.
|
clear()
|
· 센션의 데이터를 전부 삭제한다.
|
key(number)
|
· 세션의 특정 순서의 데이터를 읽어온다.
|
# 소스 코드
<html>
<head>
<title>:: JavaScript Session ::</title>
<script language="javascript">
document.addEventListener("DOMContentLoaded", function() {
if(window.sessionStorage) {
// 해당 예제를 실행하기전 이전 세션의 데이터를 clear( ) 메서드를 사용해 전부 삭제한다.
sessionStorage.clear();
}
else {
alert("세션을 사용할 수 없는 브라우저입니다.");
}
});
function printSessionStorage() {
var output = "";
// div 태그에 로컬 저장소의 내용을 출력한다.
for(var key in window.sessionStorage) {
output += "<p>";
// getItem( ) 메서드를 이용하여 key 값의 value 값을 찾는다.
output += key + " : " + sessionStorage.getItem(key);
output += "</p>";
}
document.getElementById("output").innerHTML = output;
}
function saveSessionStorage() {
// 변수를 선언한다.
var key = document.getElementById("key").value;
var value = document.getElementById("value").value;
// setItem( ) 메서드를 이용하여 key를 지정하고, value값을 세션에 저장한다.
sessionStorage.setItem(key, value);
// 데이터를 출력한다.
printSessionStorage();
}
</script>
</head>
<body>
<input type="text" id="key" value=""/>
<input type="text" id="value" value=""/>
<input type="button" value="저장" onClick="saveSessionStorage();"/>
<div id="output">
<!-- 저장된 내용을 출력할 DIV 엘리먼트 -->
</div>
</body>
</html>
|
# 출력결과
연관 포스팅 : [JavaScript] Cookie 생성, 삭제 및 읽어오기
