23-01-05 JS ) location객체, history객체, navigator객체, 콜백함수, 쿠키, 세션 - localstorage와 sessionStorage
* location객체
-location.href = 주소; -> 원하는 페이지로 바로 이동시켜줌.
*자바스크립트 새로고침
-location.reload() -> 이게 들어가면 화면이 가만히 있다가 계속 새로고침이 들어가기 때문에 잘 사용하지는 않음.
location객체 사용 코드
<body>
<button onclick="move()">이동</button>
<script>
function move(){
//location.href = "https://www.naver.com"
}
//3초마다 새로고침
// setInterval(function(){
// location.reload();
// },3000);
</script>
</body>
*history객체
-브라우저의 기록을 담당.
-뒤로가기, 앞으로 가기 버튼을 생각하면 됨.
-history.go(-3);
go는 앞뒤로 이동가능
해서 3페이지씩 이동도 가능.
-history.forward()는 한단계 앞으로가기.
-history.back(); 는 한단계 뒤로가기.
-history.pushState(저장할데이터, 바꿀제목, 바뀐주소);
pushState는 기록을 사이에 추가해주는 것.
-history.replaceState(저장할데이터, 바꿀제목, 바뀐주소);
브라우저의 기록을 바꾸는 것.
이전 페이지가 구글이었다면 이 메소드를 이용해서 이전 페이지를 네이버로 바꿀 수 있음.
참고 사이트:
https://developer.mozilla.org/ko/docs/Web/API/History/replaceState
(HTML&DOM) History API - 주소를 내 마음대로! - ZeroCho Blog
코드
<body>
1번 페이지
<button onclick="location.href='index06.html'">페이지이동</button>
<h3>리플레이스 스테이트</h3>
<button onclick="func()">기록변경하기</button>
<script>
function func(){
// history.pushState(null, '','변경.html');//브라우저 기록추가
history.replaceState('', '', null);//브라우저의 기록을 변경
}
//기록을 변경해서 사용할 데이터를 ''로 바꿔주면, 사용자가 뒤로가기 버튼을 누른것을 감지할 수 있음.
//history.state속성으로 replaceState에 담은 데이터(매개변수 중 첫번째 부분)를 확인이 가능함.
if(history.state ==''){//공백도 데이터임
alert("기록이 변경됨");
}
</script>
</body>확인
index05 에서 기록변경하기 버튼 클릭.
브라우저의 기록이 변경됨.
페이지 이동 버튼 클릭해서 index06으로 이동
뒤로가기 버튼 클릭
조건에 걸어두었던 경고창이 발생함.
#navigator객체
-navigator 객체는 현재 사용하고있는 브라우저의 정보를 담고 있는 객체입니다.
-브라우저의 종류나 모바일에서 접속했는지 등을 확인할 수 있습니다.
-navigator 객체의 userAgent 속성은 현재 사용중이 브라우저가 어떤것인지에 대해서 값을 갖고 있습니다.
확인)
userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36"
코드
<body>
<script>
var userAgent = navigator.userAgent.toLowerCase();
// console.log(navigator);
// console.log(userAgent.lastIndexOf("edg"));
//사용자가 접속한 브라우저를 userAgent라는 속성으로 알 수 있음.
if(userAgent.lastIndexOf("edg") != -1){
console.log("엣지");
} else if(userAgent.lastIndexOf("firefox") != -1){
console.log("파이어폭스");
} else if(userAgent.lastIndexOf("whale") != -1){
console.log("웨일");
} else if(userAgent.lastIndexOf("chrome") != -1){
console.log("크롬");
}
</script>
</body>결과
*geolocation.getCurrentPosition()
-현재 위치정보를 얻어옵니다.
console.log(navigator); 이렇게 navigator객체를 출력해보면 아래와 같이 다양한 속성과 값들이 나옵니다.
geolocation 이라는 속성을 누르면 사용할 수 있는 많은 함수 리스트가 있습니다.
그중에 getCurrentPosition()이라는 함수를 사용할 수 있음을 확인 할 수 있습니다.
사용예시)
navigator.geolocation.getCurrentPosition(success, fail);
//success와 fail은 둘다 콜백함수입니다. 콜백함수에 관해서는 맨 아래 오늘의 기억할 내용란에서 마저 확인.
코드
<body>
<script>
//console.log(navigator);
//콜백 - 호출하면 다시 거기다가 내가 결과를 돌려줄게
navigator.geolocation.getCurrentPosition(success, fail);
function success(result){//위치정보 조회에 성공하면 success함수를 실행
console.log(result.coords);
console.log(result.coords.latitude);//위도
console.log(result.coords.longitude);//경도
}
function fail(result){//위치정보를 실패하면 fail함수를 실행
console.log(result);
}
</script>
</body>확인
#쿠키, 세션
*쿠키
-브라우저에 저장
-같은 키의 쿠키가 생성되면 기존의 쿠키에 새 쿠키가 덮어씌어짐.
-쿠키 접근
document.cookie
-쿠키 만드는 법:
-참고: https://developer.mozilla.org/ko/docs/Web/API/Document/cookie
*쿠키만들기 - 코드
<body>
쿠키이름:<input type="text" id="cookieName">
쿠키벨류:<input type="text" id="cookieValue">
<button id="btn">쿠키만들기</button>
<script>
// document.cookie = "키=값;";
// document.cookie = "키=값; expires=UTC스트링시간타입";
// var date = new Date();
// date.setMinutes(date.getMinutes() + 1);//지금시간으로 부터 1분 뒤
// console.log(date);
//path=/; path는 쿠키가 생성된 도메인인데 생략을 해도 되기때문에 /를 썼음.
// document.cookie = "키=값; path=/; expires="+ date.toUTCString();
var cookieName = document.getElementById("cookieName");
var cookieValue = document.getElementById("cookieValue");
var btn = document.getElementById("btn");
btn.onclick = function(){
var date = new Date();
date.setHours(date.getHours() + 1);//지금시간으로 부터 1시간 뒤
var key = cookieName.value;//사용자가 입력한 값
var val = cookieValue.value;//사용자가 입력한 값
var cookie = "";
cookie += key + "=" + val + ";";
cookie += "path=/;";
cookie += "expires=" + date.toUTCString();
document.cookie = cookie;
// document.cookie = "키=값; path=/; expires="+ date.toUTCString();
}
</script>
</body>
*쿠키사용 - 코드
<body>
<h3>1번페이지에서 만든쿠키를 사용할거야</h3>
<input type="text" id="findCookie">
<button id="btn">찾을쿠키명</button>
<script>
console.log(document.cookie)
var findCookie = document.getElementById("findCookie");
var btn = document.getElementById("btn");
btn.onclick = function() {
//사용자가 입력한값
var find = findCookie.value;
var arr = document.cookie.split("; ");
//반복을 이용해서 쿠키를 찾음
for(i in arr ) { //i는 인덱스
console.log(arr[i]);
if(arr[i].indexOf(find) != -1) { //입력한 값이 있다면
// console.log('쿠키있음')
//replaceALl(" ","") 원래 공백이 있는건지 물어보기. -> 혹시 있을지 모르는 공백을 지우기 위해서 처리해준거라고 들었음.
var value = arr[i].replaceAll(" ", "").replace(find+"=", ""); //값
// console.log("키:" + find);
// console.log("값:" + value);
}
}
}
</script>
</body>
#쿠키 만들기 실습
*main.html
<body>
<h1>메인화면</h1>
<script>
window.onload = function(){
// console.log(document.cookie);
var cookie = document.cookie;
if(cookie.indexOf("popup") != -1){
return;
}
window.open("popup.html","메인창", "width=500px, height=500px");
}
</script>
</body>*popup.html
<body>
<h3>내용</h3>
<h2 style="display: inline-block;">오늘 하루 이 창을 열지 않기</h2>
<input type="checkbox" id="check">
<script type="text/javascript" src="popup.js"></script>
</body>*popup.js
var check = document.querySelector("#check");
check.onclick = function(){
var cuki = "popup=done; path:/; expires=";
var date = new Date();
// console.log(date);
date.setDate(date.getDate()+1);
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
// console.log(date);
// console.log(date.toUTCString());
cuki += date.toUTCString();
document.cookie = cuki
window.close();
}
*세션
<body>
<h3>로컬스토리지 사용하기</h3>
<button onclick="createSession();">세션만들기</button>
<button onclick="removeSession();">세션삭제하기</button>
<script>
/*
localstorage와 sessionStorage은 브라우저의 키=값 형태로 데이터를 저장하는 브라우저 측의 세션입니다.
localStorage는 브라우저를 종료하더라도 지속됩니다.
sessionStorage는 브라우저를 종료하면 사라집니다.
쿠키와 다른점은
-쿠키는 서버간 전송이 가능합니다.
-스토리지는 브라우저에서만 사용할 수 있습니다.
*/
function createSession(){
//저장
//스토리지에는 순수한 문자열만 저장이 됩니다
//그래서 obj를 저장하려면 JSON.stringify() 치환해서 저장하면 좋습니다.
localStorage.setItem("aaa","홍길동");
localStorage.setItem("bbb",JSON.stringify([1,2,3]));
//사용
var aaa = localStorage.getItem("aaa");//키
var bbb = localStorage.getItem("bbb");
console.log(aaa);
console.log(JSON.parse(bbb));
}
function removeSession(){
// localStorage.removeItem("aaa");//삭제
localStorage.clear();//로컬스트리지 전부삭제
}
// setItem(key, value) – 키-값 쌍을 보관합니다.
// getItem(key) – 키에 해당하는 값을 받아옵니다.
// removeItem(key) – 키와 해당 값을 삭제합니다.
// clear() – 모든 것을 삭제합니다.
// key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
// length – 저장된 항목의 개수를 얻습니다.
//sessionStorage는 localStorage 자리에 대신 넣어주면 됩니다.
</script>
</body>
<기억할 내용>
#콜백함수 (엄청 중요함)
*호출하면 다시 거기다가 내가 결과를 돌려줄게
참고싸이트:
코드
<body>
<h3>콜백함수</h3>
<script>
//success는 함수임.
function geolocation(success, fail){
//처리........몇초가 걸리지..?
setTimeout(function(){
//성공..
success("결과");//대신실행
},5000);
}
//사용자
geolocation(success, fail);
function success(result){//이 success함수가 콜백함수가 되는거.
console.log(result);//실행되는데 5초가 걸리고, 성공시에 result라는 변수로 결과를 받을 수 있음.
}
function fail(){
}
// geolocation(function(result){
// console.log(result); //결과..
// }, function(){});
</script>
</body>
#JS파일을 사용하는 경우.
*<script type="text/javascript" src="파일명.js"></script>
이 스크립트 태그를 head 부분에 넣을지 body 하단부에 넣을지 잘 생각해서 넣어야한다.
*JS파일 사용시 주로 많이 사용하는 함수 사용 방식 = 인라인 형식
-JS 파일내에 필요한 기능별로 함수들을 선언해 놓는다.
-태그 안에 onclick 를 작성하고 함수를 호출하는 식 (인라인형식)으로 대게 코드를 작성하고는 함.