56. (javascript/자바스크립트) 세션 스토리지 (session storage) 사용해 데이터 저장 및 삭제 수행

/* =========================== */

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

/* =========================== */

​

/* =========================== */

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. 세션 스토리지 : 윈도우나 브라우저을 닫기 전까지 데이터가 저장됩니다 (윈도우나 브라우저 탭을 닫을 경우 제거됨)
    	2. 세션 스토리지는 잠깐 동안 필요한 정보 (일회성 정보) 등을 저장합니다 (영속적인 데이터 저장은 로컬 스토리지에 저장)
    	*/


    	/* dom 생성 및 이벤트 상시 대기 실시 */
    	document.addEventListener("DOMContentLoaded", ready);
    	function ready(){
    		console.log("[window ready] : [start] : " + getNowTime24());
    		console.log("");
    	};

    	/* 세션 스토리지 특정 데이터 저장 */
    	function saveSessionData(key, value){
    		console.log("[saveSessionData] : " + "[start]");
    		console.log("["+ key +"] : " + "["+ value +"]");
    		console.log("");
    		
    		//특정 데이터 저장 실시
    		sessionStorage.setItem(key, value);
    	};

    	/* 세션 스토리지 특정 데이터 삭제 */
    	function deleteSessionData(key){
    		console.log("[deleteSessionData] : " + "[start]");
    		console.log("["+ key +"] : " + "["+ sessionStorage.getItem(key) +"]");
    		console.log("");

    		//특정 데이터 삭제 실시
    		sessionStorage.removeItem(key);
    	};

    	/* 세션 스토리지 전체 데이터 삭제 */
    	function deleteAllSessionData(){
    		console.log("[deleteAllSessionData] : " + "[start]");
    		console.log("");

    		//전체 데이터 삭제 실시
    		sessionStorage.clear();    		
    	};

    	/* 세션 스토리지 특정 데이터 조회 */
    	function selectSessionData(key){
    		console.log("[selectSessionData] : " + "[start]");
    		
    		//특정 데이터 조회 실시
    		console.log("["+ key +"] : " + "["+ sessionStorage.getItem(key) +"]");
    		console.log("");
    	};


    	/* 현재 날짜 및 시간을 구하는 함수 */
    	function getNowTime24(){
    		// DATE 객체
    		var NOW_DATE = new Date(); 

    		// UTC 시간 계산
    		const UTC = NOW_DATE.getTime() + (NOW_DATE.getTimezoneOffset() * 60 * 1000); 

    		// UTC to KST (UTC + 9시간)
    		const KR_TIME_DIFF = 9 * 60 * 60 * 1000;
    		const KR_DATE = new Date(UTC + (KR_TIME_DIFF));    		

    		// 개별 데이터 확인 실시
    		var YYYY = KR_DATE.getFullYear(); // 연 (4자리)    		
    		var MM = ("00"+(KR_DATE.getMonth()+1)).slice(-2); // 월 (2자리)
    		var DD = ("00"+KR_DATE.getDate()).slice(-2); // 일 (2자리)

    		var HH24 = ("00"+KR_DATE.getHours()).slice(-2); // 시간 (24시간 기준, 2자리)
    		var MI = ("00"+KR_DATE.getMinutes()).slice(-2); // 분 (2자리)
    		var SS = ("00"+KR_DATE.getSeconds()).slice(-2); // 초 (2자리)

    		// 리턴값 데이터 포맷 실시
    		var return_format = YYYY + "-" + MM + "-" + DD + " " + HH24 + ":" + MI + ":" + SS;    		
    		
    		return return_format;
    	};  	

    </script>

/* =========================== */

​

/* =========================== */

[결과 출력]

​

[브라우저 종료 (전)]

​

[브라우저 종료 (후)]​

/* =========================== */

​

/* =========================== */

[요약 설명]

​

/*

[JS 요약 설명]

1. 세션 스토리지 : 윈도우나 브라우저을 닫기 전까지 데이터가 저장됩니다 (윈도우나 브라우저 탭을 닫을 경우 제거됨)

2. 세션 스토리지는 잠깐 동안 필요한 정보 (일회성 정보) 등을 저장합니다 (영속적인 데이터 저장은 로컬 스토리지에 저장)

*/

/* =========================== */