브라우저 저장소(Web Storage)

---

목차

• Cookie란 무엇이고 어떤 문제가 있는가?
• Cookies의 구성요소 및 동작방식
• 브라우저 저장소란?
• 브라우저 저장소의 특징
• 브라우저 저장소의 종류
  • LocalStorage
  • SessionStorage
  • COOKIE

---

Cookie와 그에 대한 문제점

• 쿠키는 클라이언트 로컬에 저장되는 key-value의 데이터 파일이다.
• 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음, 하나의 쿠기값은 4KB까지 저장한다.
• → 쿠키는 용량과 개수에 제한이 있다.
  → 대용량은 저장이 불가능하다.*
• Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠기를 만들 수 있다.쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request HEader를 넣어서 자동으로 서버에 전송한다.
• → HTTP Request 에 암호화 되지않은 상태로 사용되기 때문에 보안에 취약하다.
  → 쿠키는 모든 HTTP Request에 포함되어 있어 웹서비스에 영향을 줄 수 있다.*

⇒ Cookie의 용량과 속도 보안의 이슈를 해결하기 위해 WebStorage기능이 HTML5에서 추가되었다.

---

브라우저 저장소(Web Stroage)란?

브라우저 저장소(Web Stroage)는 HTML5부터 추가된 기능으로 웹사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조이다.

기존의 웹환경의 쿠키와 비슷한 기능이고, WebStorage는 key-value로 데이터를 저장하고, 키를 기반으로 데이터를 조회한다. 저장소는 영구적인 LocalStorage와 임시저장소인 SessionStorage를 두고 있어 업무의 목적에 맞게 사용이 가능하다

---

Web Storage의 특징

1. 서버전송이 없다
   저장된 데이터가 클라이언트단에 존재할 뿐 서버로의 전송은 없다. 이는 네트워크 트래픽 비용을 줄여주는 역할을 한다.
2. 단순 문자열을 넘어 객체정보를 저장할 수 있다.
3. 용량의 제한이 없다
   기존 쿠키는 4KB로 제한되었는데 이에대한 문제해결이 가능하다
4. 영구데이터의 저장이 가능하다
   만료기단 설정이 없으며, 삭제하지 않는 한 영구적으로 존재한다.

---

브라우저 저장소의 종류

localStorage

• 브라우저를 종료하고 다시 열어도 정보는 그대로 유지된다.
• 데이터를 일부러 지우지 않는 이상 영구적으로 보관이 가능하다
• 도메인마다 Localstorage가 생성된다,
  → 도메인이 같으면 공유가 가능한 전역데이터이다.
• windows 전역 객체의 LocalStorage컬렉션을 통해 저장 밎 조회가 이루어진다.

sessionStorage

• 브라우저가 열여있는 동안에는 페이지를 Reload해도 계속 유지된다. 하지만 브라우저를 종료하면 데이터는 삭제된다.
• Windows전역 객체의 SessionStorage라는 컬렉션을 통해 저장 및 조회가 이루어진다.
• web stroage의 기본 보안처럼 도메인별로 별로도 생성된다. 같은 사이트의 도메인이라도 브라우저가 다르면 다른 영역이다.

쿠키

HTTP는 클라이언트와 통신이 끝나면 상태 정보를 저장하지 않는 무상태성(stateless), 요청(request)과 응답(response)이 끝나면 접속을 종료하는 비연결성(connectionless)의 특성이 있습니다. 따라서 사용자를 식별하고 정보를 저장하기 위해 쿠키가 만들어졌으며 서버에 요청할 때마다 같이 따라오기 때문에 쿠키는 최대 4kb의 용량 제한이 있습니다.

• 세션 쿠키(session cookies)
  쿠키에 만료일이 포함되지 않으면 세션 쿠키(session cookies)로 간주됩니다. 세션 쿠키는 디스크에 저장되지 않고 메모리에 저장되어 브라우저나 탭이 닫히면 영구적으로 삭제 됩니다.(은행 유저의 자격증명하는데 사용)
• 지속적 쿠키(persistent cookies)
  반대로 만료일이 포함될 경우 지속적 쿠키(persistent cookies)로 간주됩니다. 디스크에 저장되어 수동으로 삭제하기 전까진 만료 기한까지 데이터가 저장 됩니다.
  (유저가 방문 할 때마다 경험을 커스텀하기 위해 행동을 기록하는 활동에 사용)

---