#1. HTTP, Cookie, Web Storage

HTTP, Cookie, Web Storage?

초기 웹은 HTML 페이지나 이미지 등 각종 웹서비스 중간에 발생하는 일시적인 데이터 등 모든 정보를 웹 서버에 저장하도록 설계되었습니다. 하지만 시간이 지나 웹의 사용량이 폭발적으로 늘어나게 되자, 웹 서버의 부담이 기하급수적으로 커지게 되고 웹 브라우저와 웹 서버 사이의 통신 트래픽도 증가하게 되어 결국 웹 서비스 효율이 나빠지게 됩니다.

따라서 이 문제를 해결하기 위해 웹은 진화를 거듭했고 결국 HTML5에서는 웹 브라우저가 실행되는 사용자 컴퓨터에도 데이터를 저장해두는 다양한 저장 기능이 만들어지게 되었습니다.

저장 기능에는 다음과 같은 것들이 있습니다.

1. 쿠키 (Cookie)
2. 웹 스토리지 (Web Storage)
3. 로컬 파일 (Local File)
4. 인덱스드 DB (Indexed Database)

HTML5에서 이러한 로컬 저장 기능이 있는 또다른 이유는, 웹 서버와 연결이 끊어진 오프라인 환경에서도 브라우저 상에서 웹 애플리케이션이 실행될 수 있도록 하기 위함입니다.

오늘은 이 중에서 쿠키와 웹 스토리지에 대해서 알아보고 Javascript로 어떻게 이를 활용할 수 있는지에 대해 설명하도록 하겠습니다.

---

HTTP

HTTP(HyperText Transfer Protocol)는 브라우저와 서버 간 HTML 자원을 주고받는 절차와 형식을 정한 통신 규약입니다.

HTTP 통신 규칙은 HTTP/1.0에서 시작하여 HTTP/1.1 Keep Alive, HTTP/1.1 Persistence Connection으로 진화해왔습니다.

- 비연결형 프로토콜 HTTP/1.0

HTTP에서 브라우저가 웹 서버로부터 하나의 HTML 자원을 가지고 오는 과정을 HTTP 세션 이라고 부릅니다. 초기 프로토콜이면서 기본 프로토콜인 HTTP/1.0에서는 한 세션 이후 웹 서버와 브라우저 간의 네트워크 연결이 끊어집니다.
따라서 세션마다 연결을 새로 만들어야 하므로 10개의 이미지를 가지고 오기 위해서는 10번의 세션이 있어야 하는 단점이 있습니다.

- HTTP/1.1 Keep Alive

자원을 가지고 올 때마다 웹 서버에 연결하는 문제를 해결하기 위해 HTTP/1.1에서는 "Keep Alive" 문자열을 요청 데이터(요청 헤더)와 응답 데이터(응답 헤어)에 담는 방법을 사용하게 되었습니다.
예를 들어 브라우저가 요청 헤더에 Connection: Keep-Alive을 포함하면 웹 서버는 브라우저가 연결을 유지하고자 한다고 판단하고 역시 동일한 메세지를 응답 헤더에 삽입하여 보냅니다.
Keep-Alive 방식에서는 둘 중 하나라도 이 메세지를 보내지 않으면 연결이 끊어지게 됩니다.

- 지속연결형 프로토콜 HTTP/1.1 Persistence Connection

HTTP/1.1에서는 Keep Alive 방식을 폐기하고, 한 번 연결하면 타임아웃 시간동안 혹은 요청 헤더나 응답 헤더에 Connection: close라는 메세지를 보낼 때까지 연결을 유지하는 지속연결형 방식을 표준화 하였습니다.

---

Cookie

 

기본적으로 웹서버와 브라우저 사이의 데이터 통신은 무상태(stateless) 프로토콜입니다.

무상태 프로토콜이란 웹 서버가 각 요청을 개별적으로 처리하기 때문에, 연속된 두 요청을 연관시키는 기능이 없다는 의미입니다.
따라서 쿠키가 이 문제를 해결하기 위해 도입되게 된 것입니다.


쿠키란 웹 서버가 브라우저에게 지시하여 사용자의 로컬 컴퓨터에 저장하는 4KB 이하의 작은 데이터입니다.


쿠키 데이터의 구성은 다음 6가지 속성으로 이루어져 있습니다.

name=value; Expires=[Date]; Domain=[Domain]; Path=[Path]; [Secure]; HttpOnly

Javascript로 쿠키 다루기

Javascript로 새로운 쿠키를 저장하려면 document.cookie에 문자열 형태로 쿠키를 달아주기만 하면 됩니다.

function SetCookie(name, value, expireDate) {
    const cookieStr = name + "=" + escape(value) + 
    ((expireDate === null) ? "" : ("; expires=" + expireDate.toGMTString()));

    document.cookie = cookieStr;
}

위 함수는 쿠키 이름과 값, 유효시간을 매개 변수로 받아 document.cookie에 저장하는 함수입니다. 쿠키 문자열은 escape(쿠키문자열) 함수를 통해 인코딩하여 저장하고, 읽을 때는 unescape(인코딩된쿠키문자열) 함수를 통해 디코딩합니다.

function GetCookie(name) {
    // 쿠키문자열을 ";"경계로 분할
    let pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        let pair = pairs[i].trim();
        const unit = pair.split("=");

        if (unit[0] == name)
            return unescape(unit[i]);
    }

    return null;
}

다음은 쿠키를 읽는 함수입니다.
읽고자 하는 쿠키 이름을 매개변수로 받고, document.cookie 프로퍼티에서 찾아 쿠키 값을 리턴합니다.

쿠키 활용: 방문자 이름과 방문 횟수 관리하기

let username = GetCookie("usename");
let count = GetCookie("count");
let expire = new Date();

if (username === null) {
    count = 0;
    username = prompt("이름을 입력해 주세요!", "");

    if (username == null) {
        alert("이름을 입력하시면 보다 나은 서비스를 제공받을 수 있습니다.");
        username = "홍길동";
    } else {
        expire.setTime(expire.getTime() + (365 * 24 * 3600 * 1000));
        SetCookie("username", username, expire);
    }
}

count++;
expire.setTime(expire.getTime() + (365 * 24 * 3600 * 1000));
SetCookie("count", count, expire);
console.log(`어서오세요 ${username}님! ${count}번째 방문이시네요.`);

---

Web Storage

 

웹은 진화를 거듭하여 웹 애플리케이션의 형태로 거듭하였습니다. 웹에서는 정말 다양한 활동을 할 수 있습니다. 그림을 그리고 게임을 하고 심지어 기존 데스크탑 애플리케이션들도 웹으로 구현되고 있습니다.

이러한 웹 애플리케이션들은 실행 도중의 데이터를 저장할 공간을 필요로 합니다. 여러 정보들을 모두 웹 서버에 저장하는 것은 저장 공간의 크기나 네트워크 트래픽 증가 등의 여러 문제를 유발하므로 부적합하기 때문입니다.

또한 쿠키 역시 크기가 4KB로 제한되어 있어 충분한 양의 정보를 저장할 수 없고, 웹 서버에 요청을 보낼 때마다 함께 전송되므로 많은 트래픽을 발생시키므로 부적합합니다.

따라서 HTML5에서는 사용자의 로컬 컴퓨터에 데이터를 저장할 수 있는 웹 스토리지 기능을 도입하였습니다.

웹 스토리지에는 다음과 같은 특징이 있습니다.

• 웹 스토리지에는 문자열만 저장합니다. 따라서 숫자도 문자열로 바꾸어 저장해야 합니다.

 

• 웹 스토리지에 저장되는 단위는 (키, 값)으로 구성된 아이템입니다. 따라서 동일한 키를 가진 아이템은 중복하여 존재할 수 없습니다.

 

• 웹 스토리지 조작(저장, 검색, 삭제 등)은 Javascript 코드로만 가능합니다.

 

웹 스토리지의 종류는 다음 2가지로 나뉩니다.

• 세션 스토리지세션 스토리지는 브라우저 윈도우마다 마련된 독립적인 저장소입니다. 따라서 윈도우가 종료되면 함께 사라지는 일시적인 저장소의 역할을 합니다.
• 로컬 스토리지로컬 스토리지는 모든 브라우저 윈도우들이 공유하며 윈도우나 브라우저가 닫혀도 사라지지 않는 영구적인 저장소입니다.

Javascript로 웹 스토리지 다루기

개발자는 브라우저가 제공하는 Storage 인터페이스를 이용하여 Javascript 코드로 웹 스토리지를 읽고 쓸 수 있습니다.

브라우저 윈도우에 웹 페이지가 로드되면 로컬 컴퓨터에는 세션 스토리지와 로컬 스토리지가 자동으로 생성되며 이들을 각각 접근할 수 있는 Javascript 객체도 함께 생성됩니다.

if (!window.sessionStorage) {
    // 브라우저가 세션 스토리지를 지원하지 않음
    alert("세션 스토리지를 지원하지 않습니다.");
} else {
    // 다음 두가지 방법 모두 가능
    sessionStorage.setItem("score", "80");
    sessionStorage.setItem["name"] = "seungsu";

    // 값 가져오기 (없으면 null 반환)
    const myScore = sessionStorage.getItem("score");
    const myName = sessionStorage.getItem["name"];

    if (myName !== null) {
        //...
    }

    // 키 알아내기
    const key = sessionStorage.key(0);
    const val = sessionStorage.getItem(key);

    // 아이템 삭제
    sessionStorage.removeItem("score");
    sessionStorage.clear();
}

웹 스토리지 이벤트

 

웹 스토리지에 변화가 생기면 브라우저가 이벤트를 발생시켜 다른 윈도우의 웹 페이지에게 이 사실을 알립니다. 한 윈도우에서 로컬 스토리지를 변경하면 동일한 웹 페이지를 로드하고 있는 다른 윈도우에 Storage 이벤트가 발생합니다.

window.addEventListener("storage", storageEventListener, false);

function storageEventListener(e) {
    console.log(`e.key: ${e.key}`);
    console.log(`e.oldValue: ${e.oldValue}`);
    console.log(`e.newValue: ${e.newValue}`);
    console.log(`e.storageArea: ${e.storageArea}`);
    console.log(`e.url: ${e.url}`);
}

위로가기