210928 화
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>20_cookie</title>
</head>
<body>
<h1>cookie</h1>
<p>
cookie : 브라우저에 저장되는 작은 크기의 문자열로 HTTP 프로토콜의 일부<br>
* HTTP(Hypertext Transfer Protocol) : 인터넷 상에서 데이터를 주고 받기 위한
서버/클라이언트 모델을 따르는 프로토콜<br>
* 프로토콜(통신 규약) : 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고 받기 위해 정의
쿠키는 주로 웹 서버에 의해 만들어지며 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을
넣어 전달하면, 브라우저는 이 내용을 자체적으로 브라우저에 저장함<br>
브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때
쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달<br>
* Web Server : HTTP를 통해 웹 브라우저에서 요청하는 HTML 문서나 오브젝트(이미지 파일 등)을
전송해주는 서비스 프로그램
쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰임<br>
사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴
"세션 식별자(session indentifire)" 정보를 사용해 쿠키를 설정<br>
사용자가 동일 도메인에 접속하려고 하면 브라우저는 HTTP Cookie 헤더에
인증 정보가 담근 고윳값(세션 식별자)을 함께 실어 서버에 요청을 보냄<br>
서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별함<br>
document.cookie 프로퍼티를 이용하면 브라우저에서도 쿠키에 접근할 수 있음
</p>
<h3>쿠키 읽기</h3>
<p>
document.cookie는 name=value 쌍으로 구성되어 있고, 각 쌍은 ;로 구분하며
쌍 하나는 하나의 독립된 쿠키<br>
;를 기준으로 document.cookie의 값을 분리하면 원하는 쿠키를 찾을 수 있음
(정규표현식, 배열 관련 함수 사용)
</p>
<h3>쿠키 쓰기</h3>
<p>
document.cookie에 직접 값을 쓸 수 있으며
document.cookie에 값을 할당하면, 브라우저는 이 값을 받아 해당 쿠키를 갱신<br>
다른 쿠키의 값은 변경되지 않음<br>
쿠키의 이름과 값엔 특별한 제약이 없기 떄문에 모든 글자가 허용되지만
형식의 유효성을 일관성있게 유지하기 위해<br>
내장함수 encodeURIComponent를 사용하여 이름과 값을 이스케이프 처리<br>
encodeURIComponent로 인코딩한 이후의 name=value 쌍은 4KB를 넘을 수 없음<br>
도메인 하나당 저장할 수 있는 쿠키의 개수는 20여개 정도로 한정(브라우저에 따라 조금씩 다름)
</p>
<button id = "test1">쿠키 읽기</button>
<button id = "test2">쿠키 쓰기</button>
<button id = "test3">쿠키 갱신</button>
<button id = "test4">인코딩 처리 쿠키 쓰기</button>
<script>
document.getElementById('test1').addEventListener('click', function(){
console.log(document.cookie);
});
document.getElementById('test2').addEventListener('click', function(){
document.cookie = "test=cookie";
document.cookie = "user=jennie";
});
document.getElementById('test3').addEventListener('click', function(){
document.cookie = "user=woo";
});
document.getElementById('test4').addEventListener('click', function(){
let name = "my name";
let value = "Boo";
document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
});
</script>
<h3>expires, max-age 옵션</h3>
<p>
expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어 있지 않으면,
브라우저가 닫힐 때 쿠키도 함께 삭제됨<br>
expires나 max-age 옵션을 설정하면 브라우저를 닫아도 쿠키가 삭제되지 않음<br>
브라우저는 설정된 유효일자까지 쿠키를 유지하다가, 해당 일자가 도달하면 쿠키를 자동으로 삭제<br>
쿠키의 유효일자는 반드시 GMT 포맷으로 설정해야 하며 date.toUTCString을 사용하면
해당 포맷으로 쉽게 변경 가능<br>
max-age 옵션을 사용하면 보다 간편하게 초 단위로 만료 기간 설정 가능
</p>
<button id="test5">하루 유효 쿠키 쓰기</button>
<button id="test6">5초 유효 쿠키 쓰기</button>
<script>
document.getElementById('test5').addEventListener('click', function(){
let date = new Date(Date.now() + (24*60*60*1000));
date = date.toUTCString();
document.cookie = "test=tomorrow; expires=" + date;
});
document.getElementById('test6').addEventListener('click', function(){
document.cookie = "test=5sec; max-age=5";
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>22_Web Storage</title>
</head>
<body>
<h1>Web Storage</h1>
<p>
HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때 마다 쿠키(cookie)에 정보를 저장함<br>
웹 스토리지는 최소 5MB 이상의 공간을 가지고 있으며, 이 정보는 절대 서버로 전송 되지 않아
<b>사용자 촉에서 좀 더 많은 양의 정보를 안전하게 저장</b>할 수 있도록 해줌
</p>
<h3>웹 스토리지 종류</h3>
<p>
- localStorage : 보관 기한이 없는 데이터를 저장한다<br>
브라우저 탭이나 창이 닫히거나, 컴퓨터를 재부팅해도 저장 된 데이터는 없어지지 않는다<br>
- sessionStorage : 하나의 세션(session)만을 위한 데이터를 저장한다<br>
사용자가 브라우저 탭이나 창을 닫으면 이 객체에 저장 된 데이터는 사라진다
</p>
<script>
localStorage.academy = 'KH정보교육원';
localStorage['class'] = 'L오후';
localStorage.setItem('teacher','우별림');
console.log('localStorage academy : '+localStorage.academy);
console.log('localStorage class : ' + localStorage['class']);
console.log('localStorage teacher : '+localStorage.getItem('teacher'));
sessionStorage.loginUser ='우별림';
sessionStorage['userid'] = 'byeollim';
sessionStorage.setItem('loginDate',new Date());
console.log("sessionStorage.loginUser : "+sessionStorage.loginUser);
console.log("sessionStorage userid : "+sessionStorage['userid']);
console.log("sessionStorage loginDate : "+sessionStorage.getItem('loginDate'));
</script>
<button id="removeItem">일부 데이터 삭제</button>
<button id="clearItem">전체 데이터 삭제</button>
<script>
document.getElementById('removeItem').addEventListener('click',function(){
localStorage.removeItem('class');
sessionStorage.removeItem('userid');
});
document.getElementById('clearItem').addEventListener('click',function(){
localStorage.clear();
sessionStorage.clear();
});
</script>
<h3>Storage 이벤트</h3>
<p>
localStorage나 sessionStorage의 데이터가 갱신 될 때, storage 이벤트 실행<br>
storage 이벤트는 이벤트를 발생 시킨 스토리지를 제외하고 스토리지에서 접근 가능한
window 객체 전부에서 일어남<br>
즉, 두개의 창에 같은 사이트를 띄워놓았을 때 창은 다르지만 localStorage는 서로 공유 됨<br>
한 창에서 데이터를 갱신하면 다른 창에 해당 사항이 반영
</p>
<h3>storage 이벤트 속성</h3>
<ul>
<li>key : 변경 된 데이터의 키(.clear()를 호출했다면 null)</li>
<li>oldValue : 이전 값(키가 새롭게 추가 되었다면 null)</li>
<li>newValue : 새로운 값(키가 삭제 되었다면 null)</li>
<li>url : 갱신이 일어난 문서의 url</li>
<li>storageArea : 갱신이 일어난 localStorage나 sessionStorage 객체</li>
</ul>
<button id="sendMsg">다른 창으로 메세지 보내기</button>
<script>
window.addEventListener('storage', ()=> {
alert(event.key + " : "+event.newValue + " at "+event.url + " = "+"\n oldValue : "+event.oldValue);
});
document.getElementById('sendMsg').addEventListener('click', ()=>{
localStorage.setItem('msg',"다른 창에서 메세지를 보냈어요");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>23_FileReader</title>
<style>
#txtArea, #imgArea {
border : 1px solid lightgray;
min-height: 200px;
}
</style>
</head>
<body>
<h1>File API</h1>
<p>
FileReader 객체는 File 또는 Blob 객체를 이용해 내용을 읽고
사용자의 컴퓨터에 저장하는 것을 가능하게 함<br>
File 객체는 input 태그를 이용하여 유저가 선택한 파일들의 결과로 반환 된 FIleList 객체,
Drag and Drop으로 반환 된 DataTransfer 객체 등으로부터 얻음
</p>
<h3>텍스트 파일 프리뷰</h3>
<input type="file" id="txtfile">
<pre id="txtArea">텍스트 파일 내용 출력 영역</pre>
<script>
document.getElementById('txtfile').addEventListener('change',function(){
console.log(this);
console.log(this.files);
console.log(this.files[0]);
if(this.files && this.files[0]){
let reader = new FileReader();
reader.onload = function(){
console.log(reader.result);
document.getElementById('txtArea').innerHTML = reader.result;
};
reader.readAsText(this.files[0]);
}
});
</script>
<h3>이미지 파일 프리뷰</h3>
<input type="file" id="imgfile">
<div id="imgArea"></div>
<script>
document.getElementById('imgfile').addEventListener('change',function(){
if(this.files && this.files[0]){
let reader = new FileReader();
reader.onload = function(){
console.log(reader.result);
document.getElementById('imgArea').innerHTML = '<img src="'+reader.result+'">';
};
reader.readAsDataURL(this.files[0]);
}
});
</script>
<h3>텍스트 파일로 다운로드</h3>
<textarea id="txt" cols="100" rows="10" style="resize: none;"></textarea>
<br>
<button id="text1">텍스트 파일 다운로드</button>
<script>
document.getElementById('text1').addEventListener('click',function(){
let link = document.createElement("a");
link.download = 'txtfile.txt';
let blob = new Blob([document.getElementById('txt').value], {type:'text/plain'});
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(){
link.href = reader.result;
link.click();
};
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>24_DragAndDrop</title>
<style>
.image{
width: 200px;
height: 150px;
}
.div {
width: 500px;
min-height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Drag And Drop</h1>
<p>
마우스를 이용하여 파일이나 데이터를 애플리케이션 간에 전달하는 기능<br>
특히 웹 애플리케이션에서는 화면 상에 나타나는 요소를 옮기거나
웹 브라우저와 다른 웹브라우저 간의 자료를 전달하기 위해 사용<br><br>
끌기 할 요소에 draggable 속성과 끌기 관련 이벤트인 dragstart, dragend, drag 이벤트 처리<br>
놓기 영역 요소에는 dragenter, dragover, dragleave 이벤트 처리<br>
(놓기 영역에 요소를 끌어다 놓을 경우 drop 이벤트 발생)
</p>
<h2>끌기 이벤트</h2>
<pre>
- dragstart : 요소를 끌기 시작했을 때 발생
- drag : 요소를 끌기 도중에 발생
- dragend : 요소를 끌기 끝났을 때 발생
</pre>
<div id="imgs">
<img id="img1" class="image" src='resources/images/pikachu.png' draggable="false">
<img id="img2" class="image" src='resources/images/pikachu.png' draggable="true">
</div>
<div id="div1" class="div"></div>
<script>
let src = document.getElementById('imgs');
let result = document.getElementById('div1');
let isDragging;
src.ondragstart = function(){
result.insertAdjacentHTML('beforeend','dragstart : '+event.target.id+'<br>');
isDragging = false;
};
src.ondrag = function(){
if(!isDragging){
result.insertAdjacentHTML('beforeend','drag : '+event.target.id+'<br>');
isDragging = true;
}
};
src.ondragend = function(){
result.insertAdjacentHTML('beforeend','dragend : '+event.target.id+'<br>');
};
</script>
<h2>놓기 이벤트</h2>
<pre>
- dragenter : 끌기한 요소가 놓기 영역으로 들어왔을 때 발생
- dragover : 끌기한 요소가 놓기 영역에 있을 때 발생
- dragleave : 끌기한 요소가 놓기 영역을 떠날 때 발생
- drop : 끌기한 요소를 놓기할 때 발생
</pre>
<img id = ="img3" class='image' src ="resources/images/pikachu.png" draggable="true">
<div id="div2" class="div"></div>
<script>
let target = document.getElementById('div2');
let isDraggingOver;
target.ondragenter = function(){
target.insertAdjacentHTML('beforeend', 'dragenter : ' + event.target.id + "<br>");
isDraggingOver = false;
};
target.ondragover= function(){
event.preventDefault();
if(!isDraggingOver){
target.insertAdjacentHTML('beforeend', 'dragover : ' + event.target.id + "<br>");
isDraggingOver = true;
}
};
target.ondragleave = function(){
target.insertAdjacentHTML('beforeend', 'dragleave : ' + event.target.id + "<br>");
}
target.ondrop = function(){
target.insertAdjacentHTML('beforeend', 'drop : ' + event.target.id + "<br>");
}
</script>
<h3>File Drag and Drop</h3>
<div id="dropbox" class="div">
<span id="droplabel">
파일을 여기에 올려 놓으세요
</span>
<br>
<a id="download" href="#">download file</a>
</div>
<script>
let dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragover', () => event.preventDefault());
dropbox.addEventListener('drop', drop);
function drop(event){
event.preventDefault();
let files = event.dataTransfer.files;
let count = files.length;
console.log(files);
console.log(count);
if(count > 0)
handleFiles(files[0]);
}
function handleFiles(file){
let reader = new FileReader();
document.getElementById('droplabel').innerHTML = file.name;
reader.onload = function(){
let a = document.getElementById('download');
a.download = file.name;
a.href = event.target.result;
};
reader.readAsDataURL(file);
}
</script>
</body>
</html>