쌍용교육센터 - 39일

2024.04.12

 

정규표현식

<script>
	window.onload= function(){
		const form = document.getElementById('register_form');
		//이벤트 연결
		form.onsubmit = function(){
			const id = document.getElementById('id');
			/* 
			/패턴/ - > /(시작) 패턴 /(끝)
			^패턴의 시작
			[] '[' 와 ']' 사이의 문자들과 매치라는 의미
			[]안의 문자 사이에 하이픈(-)을 사용하게 되면 문자 사이의 범위(From-to)를 의미
			[a-zA-Z0-9] : a~z, A~Z, 0~9 를 의미
			{4,12} : 반복 횟수가 4~12번 사이
			$패턴의 끝
			*/
			/* if(!id.value.match(/^[a-zA-Z0-9]{4,12}$/)){ */
			if(!/^[a-zA-Z0-9]{4,12}$/.test(id.value)){
				alert('영문 또는 숫자 사용, 최소 4자 ~ 최대 12자');
				id.value = '';
				return false;
			}
		};
	};
</script>

 

웹 스토리지

웹 스토리지 API는 간단한 데이터를 사용자의 컴퓨터나 기기에 로컬로 저장하는 방법에 대한 표준을 정의한다.

 

로컬 스토리지

브라우저를 통해 사용자의 컴퓨터에 데이터를 지속적으로 저장할 수 있는 공간 다시 사이트를 방문했을 때 로컬 스토리지에 저장된 모든 데이터를 사용 가능

<script>
/* 
로컬 스토리지 : 브라우저를 통해 사용자의 컴퓨터에 데이터를 지속적으로 저장할 수 있는 공간
			다시 사이트를 방문했을 때 로컬 스토리지에 저장된 모든 데이터를 사용 가능
*/
window.onload = function(){
	const save = document.getElementById('save');
	const load = document.getElementById('load');
	
	
	//데이터 저장을 위한 이벤트 연결
	save.onclick = function(){
		const text = document.getElementById('text');
		//로컬 스토리지에 데이터 저장
		//첫번째 방법
		//localStorage.setItem('name',text.value);
		//두번째 방법
		localStorage.name = text.value;
		
		//입력창 초기화
		text.value='';
	};
	//저장된 데이터를 읽어오기 위한 이벤트 연결
	load.onclick = function(){
		//로컬 스토리지에 저장된 데이터 읽기
		//첫번째 방법
		//let loadedName = localStorage.getItem('name');
		//두번째 방법
		let loadedName = localStorage.name;
		
		alert('localStorage 객체에 저장된 이름 : ' + loadedName);
	};
};
</script>

 

JSON(JavaScript Object Notation)

<script>
window.onload = function(){
	const save = document.getElementById('save');
	//이벤트 연결
	save.onclick=function(){
		//사용자가 입력한 번호, 이름, 주소를 읽어옴
		const num = document.getElementById('num');
		const name = document.getElementById('name');
		const addr = document.getElementById('addr');
		
		//로컬 스토리지에 개별적으로 저장
		/* 
		localStorage.num = num.value;
		localStorage.name = name.value;
		localStorage.addr = addr.value;
		 */
		 
		//JSON(JavaScript Object Notation - 자바스크립트를 객체형식으로 만드는 것을 의미) 형식의 문자열로 만듬
		let memberStr = '{"num":' + num.value + ',"name":"' + name.value + '","addr":"' + addr.value + '"}';
		 
		//저장하기
		localStorage.member = memberStr; //meberStr에 저장된 문자열 저장
		 
		//입력창 초기화
		num.value='';
		name.value='';
		addr.value='';
	};
	
	const load = document.getElementById('load');
	//이벤트 연결
	load.onclick=function(){
		//저장된 문자열 읽어오기
		let loadedMemberStr = localStorage.member;
		//문자열을 객체로 변환
		const memberObj = JSON.parse(loadedMemberStr);
		//객체의 속성 호출
		alert(memberObj.num + ',' + memberObj.name+','+memberObj.addr);
	};
};
</script>

 

로컬 스토리지에 설정값 저장

<script>
	window.onload = function(){
		
		const bg_color = document.getElementById('bg_color');
		const text_color = document.getElementById('text_color');
		const text_size = document.getElementById('text_size');
		
		//초기값 설정
		load_setting();
		
		const myForm = document.getElementById('frm');
		//이벤트 연결
		myForm.onsubmit = function(event){
			//기본 이벤트 제거
			event.preventDefault();
			
			//데이터 저장
			save_setting();
			
		};
		
		//로컬 스토리지에 저장된 데이터 반환
		function load_setting(){
			bg_color.value = localStorage.getItem('bg_color');
			text_color.value = localStorage.getItem('text_color');
			text_size.value = localStorage.getItem('text_size');
			//스타일 반영
			apply_data();
		};
		//로컬 스토리지에 설정값 저장
		function save_setting(){
			localStorage.setItem('bg_color',bg_color.value);
			localStorage.setItem('text_color',text_color.value);
			localStorage.setItem('text_size',text_size.value);
			//스타일 반영
			apply_data();
		};
		//스타일을 태그에 반영
		function apply_data(){
			document.body.style.backgroundColor = bg_color.value;
			document.body.style.color = text_color.value;
			document.body.style.fontSize = text_size.value;
		};
	};
</script>

 

세션 스토리지

하나의 창이나 탭에 한정된 데이터를 보관할 수 있다. 사용자가 같은 사이트를 두 개의 창에서 접속하고 있더라도, 각 창은 자체적인 개별 세션 스토리지 객체를 가지며, 따라서 데이터를 별도로 유지하게 된다. 특정 사이트 접속해서 사용자 세션이 지속되는 동안만 세션 스토리지도 지속된다.

<script>
	/* 
	세션스토리지는 브라우저가 열려있는 동안 모든 데이터를 기억하고 있다가 탭(또는 창) 을 닫으면 모두 지워지는 저장 공간
	*/
	window.onload = function(){
		const save = document.getElementById('save');
		//이벤트 연결
		save.onclick=function(){
			const first = document.getElementById('first');
			//세션 스토리지에 저장
			//첫번째 방법
			/* sessionStorage.setItem('name',first.value); */
			sessionStorage.name = first.value;
			
			//저장된 데이터 읽기
			load();
		};
		//저장된 데이터 읽기
		function load(){
			const display = document.getElementById('display');
			//let name = sessionStorage.getItem('name');
			let name = sessionStorage.name;
			
			//저장된 값이 없으면 undefined 반환
			if(name){
				display.innerHTML = '저장된 값 : ' + name;
			}
		};
	}
</script>

 

File API

<script>
window.onload = function(){
	//파일을 선택할 때
	document.getElementById('file').onchange = function(){
		//선택한 파일의 file 객체 반환
		//input type="file" 태그에서 multiple="multiple" 속성을
		//명시하면 복수의 파일을 선택할 수 있고 그 정보는 배열에 저장됨.
		//따라서 하나의 파일을 선택해서 배열에 저장됨.
		const file = this.files[0];
		//선택한 파일의 이름출력
		alert(file.name + '을 선택하셨습니다.');
	};
	//읽기 버튼을 클릭할 때
	document.getElementById('btnStart').onclick = function(){
		readProcess();
	};
};
function readProcess(){
	//선택한 파일에 대한 정보 읽기, file 객체 반환
	const file = document.getElementById('file').files[0];
	
	if(!file){//if(file==undifined)
		alert('파일을 선택하세요!')
		return;
	}
	document.getElementById('filename').textContent = file.name;
	document.getElementById('filesize').textContent = '('+file.size+'bytes)';
	document.getElementById('filetype').textContent = file.type;
	document.getElementById('filedate').textContent = file.lastModifiedDate.toLocaleString();
	
	//select 태그 객체 반환
	const encodeList = document.getElementById('encoding');
	//선택한 인코딩 정보 반환
	let encoding = encodeList.value;
	
	const reader = new FileReader(); //파일 읽기 기능 제공
	reader.readAsText(file,encoding);///선택한 파일을 읽어서 문자열로 저장
	//파일의 내용을 모두 읽어들이면 onload 속성에서 대입된 함수가 호출됨
	reader.onload = function(){
		const contents = document.getElementById('contents');
		contents.value = reader.result;//읽어들인 내용 반환
	};
	reader.onerror=function(){
		alert('파일 읽기 중 오류 발생');
	};
}
</script>