55. (javascript/자바스크립트) 로컬 스토리지 (local storage) 사용해 데이터 저장 및 삭제 수행

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

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : javascript

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

​

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

[소스 코드]

 

    <script>

    	/*
    	[JS 요약 설명]
    	1. 로컬 스토리지 : 동일한 컴퓨터에서 동일한 브라우저를 사용할 때 데이터가 저장됩니다
    	2. 로컬 스토리지는 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있습니다
    	3. 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다 (세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐)    	
    	4. 로컬 스토리지를 통해 저장된 데이터는 만료기한이 없고, 웹 애플리케이션이 삭제되기 전이나 사용자가 브라우저의 특정 인터페이스를 통해 삭제하기전까지는 
    	   사용자의 컴퓨터에 존재하므로 영구적으로 저장된다고 할 수 있습니다
    	*/


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

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

    	/* 로컬 스토리지 특정 데이터 삭제 */
    	function deleteLocalData(key){
    		console.log("[deleteAllLocalData] : " + "[start]");
    		console.log("["+ key +"] : " + "["+ localStorage.getItem(key) +"]");
    		console.log("");

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

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

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

    	/* 로컬 스토리지 특정 데이터 조회 */
    	function selectLocalData(key){
    		console.log("[selectLocalData] : " + "[start]");
    		
    		//특정 데이터 조회 실시
    		console.log("["+ key +"] : " + "["+ localStorage.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. 로컬 스토리지는 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남아 있습니다

3. 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다 (세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐)

4. 로컬 스토리지를 통해 저장된 데이터는 만료기한이 없고, 웹 애플리케이션이 삭제되기 전이나 사용자가 브라우저의

   특정 인터페이스를 통해 삭제하기전까지는 사용자의 컴퓨터에 존재하므로 영구적으로 저장된다고 할 수 있습니다

*/

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