CH11. Web APIs

🐸Console

1. 콘솔에 메시지나 객체를 출력

• log: 일반 메시지
• warn: 경고 메시지
• error: 에러 메시지
• dir: 속성을 볼 수 있는 객체를 출력

2. 콘솔에 메소드 호출의 누적 횟수를 출력하거나 초기화

• console.count('이름')
• console.countReset('이름')

🐸Cookie(쿠키)

• 도메인 단위로 저장
• 표준안 기준, 사이트당 최대 20개 및 4KB로 제한(적은편)
• 영구 저장 불가능
• 배너 하단에 '하루동안 열지 않기' 같은 특정 버튼을 만들 때 주로 사용

✅옵션

• domain: 유효 도메인 설정
• path: 유효 경로 설정
• expires: 만료 날짜(UTC Date) 설정 ->new Date().toUTCString() 사용
• max-age: 만료 타이머(s) 설정
• 만료 시각 미입력시 '세션'으로 표시됨 -> 브라우저가 종료되면 쿠키 제거됨

• 사용 예시

document.cookie = 'a=1; domain=localhost; path=/abc'
document.cookie = 'b=2 max-age=3' //3초 후 b쿠키 종료됨
document.cookie = `c=3 expires=${new Date(2024, 0, 16).toUTCString()}` //month는 -1하여 표기

🐸Storage(스토리지)

• 만료라는 개념이 없음
• 도메인 단위로 저장
• 5MB 제한(쿠키보다 많은편)
• 세션 혹은 영구 저장 가능
• 기본적으로 문자데이터 상태로 저장됨 ->JSON.stringify사용해 JSON으로 변환
• 종류
  • sessionStorage: 브라우저 세션이 유지되는 동안에만 데이터 저장
  • localStorage: 따로 제거하지 않으면 영구적으로 데이터 저장

✅옵션

• .getItem(): 데이터 조회
• .setItem(): 데이터 추가
• .removeItem(): 데이터 제거
• .clear(): 스토리지 초기화

• 사용 예시

local/*session*/Storage.setItem('a', 'hi')  
localStorage.setItem('b', JSON.stringify({ x: 1, y: 2}))

console.log(localStorage.getItem('a'))
console.log(JSON.parse(localStorage.getItem('b')))

🐸Location

• 현재 페이지 정보를 반환하거나 제어
• console.log(location)으로 확인

✅속성 및 메소드

• .href: 전체 URL 주소
• .protocol: 프로토콜
• .hostname: 도메인 이름
• .pathname: 도메인 이후 경로
• .host: 포트 번호를 포함한 도메인 이름
• .port: 포트 번호
• .hash: 해시 정보(페이지의 ID)
• .assign(주소): 해당 '주소'로 페이지 이동
• .replace(주소): 해당 '주소'로 페이지 이동, 현재 페이지 히스토리를 제거 -> 뒤로가기 불가능
• .reload(강력): 페이지 새로고침, 'true'인수는 강력 새로고침
  • 일반 새로고침: 브라우저가 캐시를 한 상태에서 그대로 출력하여 빠르게 페이지를 다시 로드 해올 수 있음
  • 강력 새로고침: 내용을 새로 가지고와서 출력해 기존에 남아있던 정보가 그대로 출력되는 것을 방지 -> 속도 느림

🐸History

• 브라우저 히스토리(세션 기록) 정보를 반환하거나 제어
• console.log(history)로 확인

✅속성 및 메소드

• .length: 등록된 히스토리 개수
• .scrollRestoration: 히스토리 탐색시 스크롤 위치 복원 여부 확인 및 지정
• .state: 현재 히스토리에 등록된 데이터(상태)
• .back(): 뒤로가기
• .forward(): 앞으로 가기
• .go(위치): 현재 페이지 기준 특정 히스토리 '위치'로 이동
• .pushState(상태, 제목, 주소): 히스토리 상태 및 주소를 추가
• .replaceState(상태, 제목, 주소): 현재 히스토리의 상태 및 주소를 교체
• 모든 브라우저(safari 제외)는 '제목' 옵션을 무시