[Javascript] 데이터 읽기, 쓰기 / window 객체

---

 

#1. 데이터 읽기, 쓰기

1. 쿠키(Cookie)

1) 쿠키(Cookie)란?

• 사용자의 웹 브라우저에 저장되는 텍스트 데이터이다. (키와 값)
• 모든 사용자가 각각 자신만의 정보를 저장할 수 있기 때문에 개인화 기능을 구현하는데 활용될 수 있다.
• 사용자 인증이 유효한 시간을 명시할 수 있고, 유효 시간이 정해지면 브라우저가 종료되어도 유지된다.
• 클라이언트에 300개 까지 저장 가능하고, 하나의 도메인당 20개의 값만 가질 수 있다.
• 이름과 값은 모두 URLEncoding 처리 되어야 한다. (영어, 숫자는 제외)
• 오늘 본 상품, 오늘 하루 이 창 열지 않음 등에 쓰인다.

<div>
  <select name="cookie_name" id="cookie_name">
    <option value="name">name</option>
    <option value="age">age</option>
  </select>
  <select name="cookie_time" id="cookie_time">
    <option value="">None</option>
    <option value="0">0</option>
    <option value="5">5s</option>
    <option value="10">10s</option>
    <option value="30">30s</option>
  </select>
  <input type="text" id="cookie_var" />
  <button type="button" id="save">save</button>
</div>

document.querySelector("#save").addEventListener("click", e => {
  // 선택한 쿠키 이름 가져오기
  const cookieName = document.querySelector("#cookie_name");
  const cookieNameChoose = cookieName[cookieName.selectedIndex].value;

  // 선택한 쿠키의 유효시간 가져오기
  const cookieTime = document.querySelector("#cookie_time");
  const cookieTimeChoose = cookieTime[cookieTime.selectedIndex].value;

  // 저장할 쿠키의 내용
  const cookieVar = document.querySelector("#cookie_var");
  const cookieVarValue = cookieVar.value;

  // 쿠키에 저자할 정보의 문자열 구성 -> "user=John; path=/; max-age=3600"
  let cookie_str = encodeURIComponent(cookieNameChoose) + "=" + encodeURIComponent(cookieVarValue) + ";";
  cookie_str += "path=/;";

  // 선택된 값이 있다면
  if(cookieTimeChoose) {
    cookie_str += "max-age=" + cookieTimeChoose + ";";
  }

  // 쿠기에 값을 대입
  document.cookie = cookie_str;
});

 

2) 쿠키의 구성 요소

• 이름 : 각각의 쿠키를 구별하는데 사용되는 이름
• 값 : 쿠키의 이름과 관련된 값
• 유효시간(expires) : 쿠키의 유지시간
  • 유효시간은 초단위로 기록한다.
  • 유효시간이 설정되지 않으면 브라우저를 닫기 전 까지 데이터가 유지된다.
  • 0으로 설정하면 즉시 삭제된다.
  • 0보다 큰 숫자로 설정하면 해당 초가 지나기 전까지는 브라우저를 재시작 하더라도 저장된 정보가 유지된다.(오늘하루 열지않음)
• 도메인 : 쿠키를 전송할 도메인
  • 쿠키는 기본적으로 저장된 도메인에서만 유효하다.
  • www.naver.com 에서 저장한 쿠키는 blog.naver.com 에서는 식별되지 않는다.
  • ".naver.com" 도메인을 설정하면, 앞에 붙는 호스트 이름에 상관 없이 쿠키가 공유 된다.
  • 패밀리 사이트간에 정보 공유를 위해 많이 사용된다. (통합로그인)
• 경로(path) : 쿠키를 전송할 요청 경로
  • 경로는 해당 쿠키값을 읽고 쓸 수 있는 특정 폴더 경로를 지정할 수 있다.
  • 일반적으로 " / " 만 지정하여 사이트 전역에서 쿠키가 유효하게 설정한다.

 

3) 장점

• 대부분의 브라우저가 지원한다.
• 서버의 저장공간이 절약된다.

 

4) 단점

• 매 HTTP 요청마다 포함되어 api 호출로 서버에 부담이 된다.
  • 페이지 이동시마다 백엔드에 무조건 모든 쿠키가 전송된다.
• 쿠키의 용량이 작다. (하나당 4KB)
• 암호화로 존재하지 않는다.
  • 사용자 정보의 안정성이 보장되지 않는다.
  • 그래서 노출되도 상관없는 데이터를 저장한다.

 

2. 웹 스토리지

1) 웹스토리지(Web Storage)란?

• 쿠키의 단점을 보완해 HTML5 에서 추가된 기술로 로컬스토리지와 세션스토리지로 구분된다.
• 웹스토리지는 key와 value의 형태로 이루어진다.
• 웹스토리지는 클라이언트에 대한 정보를 저장한다.
• 웹스토리지는 로컬에만 정보를 저장하고, 쿠키는 서버와 로컬에 정보를 저장한다.

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

※ 세션스토리지는 localStorage를 sessionStorage로 바꾸기면 하면된다.
  ex) sessionStorage.setItem("key", value);

 

※ 원래는 window.localStorage(sessionStorage) 를 사용해야 하지만, window 객체는 당연하게 쓰이는 느낌이기 때문에 줄여서 localStorage로 접근할 수 있다.

 

2) 장점

• 서버에 불필요한 데이터를 저장하지 않는다. (백엔드에 전송되지 않는다.)
• 저장 가능한 데이터의 용량이 크다. (약 5MB, 브라우저마다 차이가 있다.)

 

3) 단점

• HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다. (거의 없다고 봐도 무방하다.)

 

4) 로컬스토리지

• 클라이언트에 대한 정보를 반영구적으로 저장하고, 브라우저를 종료해도 데이터가 유지된다.
• 브라우저 자체에 반영구적으로 데이터가 유지되지만, 도메인이 다른 경우에는 로컬 스토리지에 접근할 수 없다.
• 자동 로그인 저장에 주로 쓰인다.

 

5) 세션스토리지

• 각 세션마다 데이터가 개별적으로 저장된다.
  • 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장
• 세션 종료시(브라우저를 닫을 경우) 클라이언트에 대한 정보를 삭제한다.
• 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.
• 입력 폼 정보 저장, 비로그인 장바구니 등에 쓰인다.

 

#2. window 객체

1. window 객체란?

1) 전역객체의 window

• 브라우저 안의 모든 요소들이 소속된 객체의 최상위에 있기 때문에 어디서든 접근이 가능하다.
• 우리가 선언하는 변수나 함수는 다 window 객체의 프로퍼티가 된다.
  • 그럼에도 앞에 window를 붙이지 않는데, 그 이유는 말 그대로 페이지 내에 있는 모든 객체를 다 포함하기 때문에 생략가능하다.

 

2) 브라우저의 window

• 일반적으로 우리가 열고 있는 브라우저 창을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다.

 

2. window 객체의 종류

종류	설명
window	브라우저 창 객체, BOM의 최상위 객체
location	주소표시줄 객체
screen	운영체제 화면 객체
history	방문기록 객체
navigator	브라우저 정보 객체
document	문서 객체(body태그부분을 의미)

 

1) window 속성의 종류

속성 종류	설명
closed	창이 닫혀 있는지 열여있는지를 불리언 으로 반환한다. 닫혀 있으면 true, 열려있으면 false를 반환
innerHeight	창의 콘텐츠 영역 높이를 반환한다. - 스크롤바나 제목표시줄 등은 제외
innerWidth	창의 콘텐츠 영역 넓이를 반환한다. - 스크롤바나 제목표시줄 등은 제외
length	현재 창의 아이프레임 개수를 숫자로 반환
outerHeight	창의 모든 인터페이스 요소(스크롤바 등)를 포함한 높이를 반환
outerWidth	창의 모든 인터페이스 요소(스크롤바 등)를 포함한 넓이를 반환
pageXOffset	현재 문서가 창의 왼쪽에서 얼마나 스크롤되어 있는지를 픽셀 수치로 반환
pageYOffset	현재 문서가 창의 위쪽에서 얼마나 스크롤되어 있는지를 픽셀 수치로 반환
parent	아이프레임으로 되어 있는 페이지의 부모가 되는 페이지를 선택하는 속성
screenLeft	창이 화면 좌측을 기준으로 얼마만큼 떨어져 있는지 좌표를 반환
screenTop	창이 화면 상단을 기준으로 얼마만큼 떨어져 있는지 좌표를 반환
screenX	창이 화면 좌측을 기준으로 얼마만큼 떨어져 있는지 좌표를 반환
screenY	창이 화면 상단을 기준으로 얼마만큼 떨어져 있는지 좌표를 반환
self	현재 창을 반환
top	현재 창의 최상위 브라우저 창을 반환

 

2) window 메서드의 종류

메서드 종류	설명
close( )	창을 닫는 메서드 (매개변수 없음)
moveBy(x,y)	창을 상대적으로 이동시키는 메서드
moveTo(x,y)	창을 절대적으로 이동시키는 메서드
open(url,name,specs,replace)	새창 혹은 새탭으로 창을 여는 메서드
print( )	현재 창을 인쇄할 수 있는 창을 띄워주는 메서드
resizeBy(w,h)	창 사이즈를 상대적으로 변경시키는 메서드
resizeTo(w,h)	창 사이즈를 절대적으로 변경시키는 메서드
scrollBy(x,y)	창의 스크롤바 위치를 상대적으로 이동시키는 메서드
scrollTo(x,y)	창의 스크롤바 위치를 절대적으로 이동시키는 메서드
stop( )	창이 로드되는 것을 멈추는 메서드 (IE 및 Edge는 사용안됨)

 

※ window의 open 메서드 

window.open(url,name,specs,replace);

// 사용 예시
const popup = window.open("https://www.naver.om", "", "width=300, height=500, scrollbars=no, toolbar=no, menubar=no, status=no, location=no");

• 매개변수 종류

매개변수 종류	설명
URL	창으로 띄울 주소를 담는 매개변수
name	창이 띄워질 위치(대상)을 지정하는 매개변수
	_blank	URL의 주소가 새창 혹은 새탭으로 띄워진다. (기본값)
	_parent	아이프레임의 부모가 되는 페이지로 URL주소가 띄워진다.
	_slef	현재 페이지로 URL주소가 띄워진다. (주소가 바뀜)
	_top	로드되는 모든 frameset으로 URL주소가 띄워진다.
	name	새창으로 띄워진 곳의 이름을 작성하면 그곳에서 url 주소가 띄워진다.
specs 대부분의 옵션 값은 yes || no 로 지정한다. 위치나 크기만 픽셀단위로 지정	띄워지는 창에 대한 옵션을 설정, 쉼표로 아이템을 구분해서 작성한다. window.open("주소", "_blank", "옵션=값, 옵션=값", true);
	height	창의 높이를 지정하는 옵션, 최소값은 100으로 처리
	left	창의 왼쪽 좌표를 지정하는 옵션, 음수는 지정되지 않음
	location	주소표시줄을 표시할지 지정하는 옵션, 오페라브라우저에만 사용가능 피싱 사이트를 방지하기 위해 브라우저 개발사들이 지원하지 않고 있다.
	menubar	메뉴바를 표시할지 지정하는 옵션
	scrollbars	스크롤바를 표시할지 지정하는 옵션
	resizable	창 사이즈를 변경할지 지정하는 옵션
	status	상태표시줄을 표시할지 지정하는 옵션
	titlebar	타이틀바를 표시할지 지정하는 옵션
	toolbar	브라우저 툴바를 표시할지 지정하는 옵션
	top	창의 상단 좌표를 지정하는 옵션, 음수는 지정되지 않음
	width	창의 가로폭을 지정하는 옵션, 최소사이즈는 100으로 처리
replace	url로 작성한 주소를 새항목으로 만들지, history 목록의 현재 항목으로 대체할지를 지정 -true : history 목록의 현재 문서로 대체 -false : 주소를 새 항목으로 대체