본문 바로가기
  • hello world
FrontEnd/HTML CSS

[Web] Browser : HTTP · Cookie · WebStorage

by JJoajjoa 2023. 9. 8.

 

 

 

▶ Window Browser

 

☞ window (객체)

창이나 탭에 대한 전역객체

웹 페이지 최상위 요소

 

 document

현재 문서에 대한 인터페이스, HTML 문서의

모든 요소와 내용을 접근해서 조작할 수 있따

 

 navigator

현재 사용 중인 브라우저 및 운영체제에 접근할 수 있듬

 

 location

현재 url과 관련된 정보기능을 제공

 

 history

브라우저 내에서 방문한 URL들의 기록

>> history stack에 접근하여 조작할 수 있음

 

 

 

 

▶ HTTP

Hypertext Transfer Protocol

웹에서 데이터를 주고 받기 위한 프로토콜

통신 프로토콜: 컴퓨터에서 데이터 교환 방식을 정의하는 규칙 체계

 

클라이언트(사용자 브라우저) 와 서버간의 통신 담당

요청(Request)과 응답(Response) 형식으로 이루어짐

 

 

통신의 역사

 

클라이언트가 HTTP요청을 보내고

서버가 해당 요청에 대한 응답을 반환한다 << HTML(전체문서, 이미지, 동영상 등)

 

 

 

 

 

Cookie

쿠키 :

웹 서버가 클라이언트에게 정보를 저장하고,

추적하기 위해 사용되는 4KB 이하의 작은 데이터 조각

 

쿠키는 클라이언트의 로컬 컴퓨터에 저장함

다음 통신요청 시 해당 정보를 함께 전송해서

상태유지 및 개인화 기능을 구현해줌

 

 

 

 

Web Storage

웹 스토리지 :

웹 어플리케이션에서 데이터를 임시 · 영구 저장 하기 위한 매커니즘

클라이언측에서 관리

 

1.  localStorage :

객체를 통해 데이터를 영구 저장

동일 도메인 내에서 모든 페이지 및 세션 간의 공유 가능

 

2. sessionStorage :

객체를 통해 데이터를 임시 저장

현재 세션에서만 유지되기 때문에 페이지가 닫히면 삭제됨

 

 

 

 

▷ 쿠키 & 웹스토리지

웹 스토리지가 쿠키보다 용량 제한이 크고, API가 간단하고 보안도 우수함

> 로그인 정보, 사용자 설정 등을 웹 스토리지로 사용

 

 

 

'FrontEnd > HTML CSS' 카테고리의 다른 글

Bootstrap 부트스트랩  (0) 2024.07.26
[Web] Web Workers  (0) 2023.09.08
[Web] CSS : 텍스트 꾸미기  (0) 2023.09.05
[Web] CSS : 색 표현  (0) 2023.09.05
[Web] CSS : Selector 선택자  (0) 2023.09.05