[Web][조금 더 자세히]cookie는 너무 구식아냐? 이제부턴 Web Storage!

Kamangs 2019. 2. 10. 05:04

2019. 2. 10. 05:04

728x90

참고

[Web][조금 더 자세히]도대체 왜 이름이 쿠키인걸까?, 상태를 저장하는 http cookie

[Web][조금 더 자세히]서버와 클라의 연결고리, 상태를 서버에 저장하는 http session, cookie와의 비교

이 섹션을 읽기전에 참고에 있는 cookie와 session을 읽고 읽는 것을 추천한다.

그래야 흐름이 맞기 때문이다.

물론... 읽기 귀찮은 사람들 위해서 간략히 설명을 하자면

cookie는 클라이언트에 정보를 저장하는 기술, session은 서버에 정보를 저장하는 기술이다.

이번에는 Web Storage에 대해서 설명하겠다. 처음 듣는 사람도 꽤 있을 것이다.

책이나 교수들이 다 옜날거 위주라서 Web Storage에 대해서 모르는 사람이 많다.

여기를 참조해서 보면 논의는 2013년부터 됬고 실제로 제대로 쓰이게 된 버전은 2016년이다.

즉 따끈 따끈한 신기술이다.

이 기술은 브라우저에 매우 종속된 기술인데 브라우저에서 얼만큼 지원하는지는 여기를 보면 알 수 있다.

일단 어떤 기술인지 부터 간략하게 한줄로 설명하겠다.

클라이언트에 정보를 저장하는 key-value형태의 데이터

일종의 db라고 할 수 있다. 위키피디아에서 확인해본 데이터를 보면 chrome과 firefox, safari는 sqlite에 저장하고

ie와 opera는 xml데이터로 파일형태로 저장되어있다.

여러분은 여기까지 오면 슬금슬금 생각나는게 있을것이다.

바로 cookie!! 설명이 너무너무 비슷하다.

session도 cookie도 statless한 http에 state를 줄려는 기술이다.

web storage역시 마찬가지이다. 그런데 어떻게 봐도 cookie와 매우 비슷한 기술이다.

하지만 쿠키와는 다르다. 쿠키와 어떻게 다른지는 아래에서 설명하도록 하겠다.

먼저 백문이 불여 일견이니 webstorage에 대해서 보도록 하자.

localStorage - 로컬에 도메인 별로 지속되는 storage

sessionStorage - 세션이(프로세스, 탭, 브라우저) 종료될 때까지 지속되는 storage

일단 먼저 localStorage부터 알아보자.

나는 지우기 직전까지 죽지않아 => localStorage

localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다.

값을 지우려면 직접 지워줘야한다.

<!DOCTYPE html>
<html>
  <head>
    <title>web storage test</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>web storage test</h1>
    <script>
      localStorage.setItem('name','kukaro');
      console.log(localStorage.getItem('name'));
      console.log(localStorage)
      console.log(localStorage.constructor.name)
    </script>
  </body>
</html>

위의 코드를 정말 별거 없지만 사실 대부분의 상황에서 사용하는 localStorage의 메소드는

setItem과 getItem이 전부다.

setItem - 키와 밸류를 정해서 값을 저장한다.

getItem - 키를 사용해서 값을 불러온다.

값을 정작 확인해서 보면 그냥 object에 값을 붙힌거 뿐이라는 생각이든다.

그러면 raw하게 쓸수 없을까?(method를 통하지 않고)

<!DOCTYPE html>
<html>
  <head>
    <title>web storage test</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>web storage test</h1>
    <script>
      localStorage.name = 'kukaro';
      console.log(localStorage.name);
      console.log(localStorage)
      console.log(localStorage.constructor.name)
    </script>
  </body>
</html>

이렇게 사용해도 위와 같이 작동한다.

따라서 메소드를 통해서 사용해도 되고 직접 붙혀도 된다.

<!DOCTYPE html>
<html>
  <head>
    <title>web storage test</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>web storage test</h1>
    <script>
      localStorage.name = 'kukaro';
      localStorage.age = 27;
      delete localStorage.name;
      localStorage.removeItem('age');
      console.log(localStorage);
      console.log(localStorage.name);
    </script>
  </body>
</html>

이미 선언한 값을 지울 수도 있다.

delete을 사용할 수도 있고 removeItem을 사용할 수 있다.

이역시 여러분의 마음이다.

보다시피 값을 지울 수 있다.

<script>
    localStorage.name = 'kukaro';
    localStorage.age = 27;
    localStorage.clear()
    console.log(localStorage);
</script>

또한 값을 한번에 다 지우고 싶다면 clear를 사용하면된다.

removeItem - 키를 사용해서 값을 하나 지운다.

clear - 모든 값을 지운다.

<!DOCTYPE html>
<html>
<head>
    <title>web storage test</title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1>web storage test</h1>
<script>
    localStorage.name = 'kukaro';
    localStorage.age = 27;
    localStorage['1way'] = 'noway';
    localStorage['1'] = 'No.1';
    localStorage.배고프다 = '나도';
    for (let i = 0; i < localStorage.length; i++) {
        console.log(localStorage.key(i));
    }
    console.log(localStorage);
</script>
</body>
</html>

값을 저장하면 key값으로 정렬을 해서 저장한다.

그래서 key메소드를 사용하면 key값의 순서대로 출력할 수 있다.

위와 같이 사전 순서대로 저장되는걸 확인할 수 있다.

length - 사이즈를 반환한다.

key - storage는 사전순서로 저장하는데 사전순서로 꺼내온다.

이정도면 그냥 역활을 다한거 같지만 더 좋은게 있다.

바로 Storage Event이다.

<!DOCTYPE html>
<html>
<head>
    <title>web storage test<%= Math.floor(Math.random() * 100) %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1>web storage test</h1>
<script>
    window.onstorage = function (event) {
        console.log(event);
    }
    localStorage.setItem('name', 'kukaro');
    localStorage.setItem('name', 'jiharu');
    localStorage.clear();
    console.log(localStorage)
</script>
</body>
</html>

웹 스토리이지에서 브라우저는 onstorage라는 이벤트를 제공한다.

이 이벤트는 storage 값의 변동에 민감하게 반응한다.

위의 예제를 시행해 보면 아무 일도 안일어난다.

당황하지마라. 이 이벤트는 현재 탭에서는 일어나지 않는다.

바로 "다른 탭" 혹은 "다른 프로세서"의 변화를 감지하는 것이다.

이벤트를 어떻게 감지하는지를 확인할 수 있다.

주요 이벤트 property

key - 이벤트를 일으킨 녀석

newValue - 바뀐 값

oldValue - 옛날 값

url - 이벤트가 일어난 url

storageArea - 일어난 storage

이를 이용해서 다른 탭이나 프로세스에서 일어난 변화를 감지할 수 있다.

이는 같은 브라우저 + 같은 도메인이면 같은 값을 쓰는 localStorage의 특징을 확인할 수 있다.

난 세션이 끊기면 죽는다 => sessionStorage

세션 스토리지는 localStorage와 쓰는 느낌이 비슷한데 커다란 차이점이 있다.

그것은 바로 소멸 타이밍이다. localStorage는 소멸타이밍이 없다. 즉 직접 지워줘야한다.

그러나 sessionStorage는 세션의 종료시 죽음을 맞이한다.

그런데 이 session이라는 용어는 아주 우리가 일반적인 의미의 세션과는 좀 다르다.

보통 세션의 종료는 일반적으로 브라우저의 종료를 뜻한다.

새창을(프로세스)띄우건 새탭을 띄우건 이는 세션종료를 의미하지 않는다.

그러나 sessionStorage에서 의미하는 세션은 가장 작은 단위인 탭단위를 의미한다.

탭마다 sessionStorage는 따로 배정되며 서로의 영역을 공유하지 않는다.

따라서 값을 침범할 수 도 없다.

<!DOCTYPE html>
<html>
<head>
    <title>web storage test<%= Math.floor(Math.random() * 100) %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
</head>
<body>
<h1>web storage test</h1>
<input type="text" id="key"><input type="text" id="value">
<input type="button" onclick="myclick()" value="등록"></input>
<script>
    sessionStorage.setItem('name', 'kukaro');
    sessionStorage.setItem('age', 27);

    function myclick() {
        let key = document.getElementById('key');
        let value = document.getElementById('value');
        sessionStorage.setItem(key.value, value.value);
        console.log(sessionStorage)
    }
</script>
</body>
</html>

위코드를 동작해보자. 3개의 탭을 띄우고 sessionStorage에 값을 추가해보아라.

그래봤자 모두 다른 값을 가지게된다.

그래서 sessionStorage는 더 각별하다.

cookie가 가졌던 근본적인 문제인 도메인 같으면 항상 쿠키를 보낸다는 조건이 sessionStorage를 통해 해소하려한 흔적이 보인다.

이제 사용법은 어느정도 알려드린 것 같다.

그럼 이제 cookie와의 차이점을 알려줘

이 까지만 봐도 차이점은 보이지만 그래도 명시적으로 설명하는게 좋을 것 같다.

요약같은 느낌으로 설명하면 될것 같다.

쿠키를 설명할 때 용량제한 시간제한 갯수제한이 있다고 했다.

Web Storage도 제한은 있지만 시간제한과 갯수제한은 없다.

용량 제한이 있는데 ie는 10MB, 다른 브라우저는 5MB의 용량제한을 가진다.

3~5kb남짓의 쿠키보다는 압도적인 용량을 가진다.

용량은 몰라도 시간제한이 없는건 쿠키와 비교했을 때 WebStorage의 단점이다.

이러한 점에서 Session과 좀 비슷한 성향이 있는데 사용자가 WebStorage를 일일히 관리해줘야한다는 점이다.

악의적이게 사용하는 사람이 없다면 용량이 다 찰일은 크게 없겟지만... 어디가나 마친놈은 있다.

session과 비슷하다고 느껴지는것은 session을 설명할 때 프로그래밍 적인 테크닉이 가능하며

각각언어에 맞는 객체및 데이터를 session에 보관할 수 있다.

WebStorage역시 그냥 자바스크립트 객체이다.

그래서 자바스크립트 객체를 넣는것 역시 가능하며 문자열에 크기제한이 있는 cookie에 비해서 비교우위를 가진다.

그리고 requst와 response시에 모든 쿠키를 다 넘겨야 했는데 원래 비용이 큰 http통신에 더 큰 부하를 준다.

그러나 WebStorage는 그냥 개발자가 선별해서 넘기면 되므로 http통신에도 부하를 줄일 수 있다.

브라우저가 종료되면 자동으로 사라지는 쿠키를 재현하기 위해서 sessionStorage를 도입하였다.

sessionStorage의 존재로 세션이 유지되는 동안만 필요한 데이터를 저장할 수 있게 되었다.

또한 쿠키는 domain별로 데이터가 분리되지만 같은 브라우저라면 값을 공유했다.

sessionStorage는 다른 탭이라면 데이터가 공유도지 않는다.

만약 공유할 데이터는 localStorage에 넣으면 되므로 선택의 폭이 커졌다.

쿠키는 자신의 변화를 감지할 방법이 없다. web storage는 자신의 변화를 이벤트로 감지할 수 있다.

1.제한

cookie - 용량제한, 시간제한, 갯수제한 존재

webstorage - 용량제한만 존재

2.시간제한 설정

cookie - 시간제한 설정가능

webstorage - 시간제한 설정 불가능

3.데이터형

cookie - 문자열만 저장가능

webstorage - javascript 객체 저장가능

4.데이터 전송

cookie - 모든 쿠키를 전송해야함, cookie를 가공함으로써 발생하는 side effect존재

webstorage - 개발자가 선택해서 전송할 수 있고 가공할 수도 있음

5.세션의 정의

cookie - 같은 브라우저면 다른 탭이나 다른 창(프로세스)일지라도 같은 세션이라고 정의

webstorage - 같은 브라우저일지라도 sessionStorage의 경우 다른 탭이면 다른 세션이라고 정의

6.이벤트

cookie - 이벤트 없음

webstroage - 이벤트 존재

쿠키와 비교하면 장단점이 존재하지만 대부분의 면에서 쿠키보다는 낫다.

왜냐하면 쿠키의 단점을 보완하기 위해서 나온것이 webstorage이기 때문이다.

그래도 필자가 생각하는 cookie의 비교우위는 webstorage가 아무래도 쓰는게 더 까다롭다는 점이다.

시간제한도 없는데다가 데이터는 영속성을 띈다.

게다가 항상 코드를 작성해서 데이터를 넘겨줘야한다는 점이서 유지보수는 좀더 까다로운 편이다.

session과 비교했을 때는 어때?

webstorage는 원리는 cookie같지만 사용하는 느낌은 session에 더 가깝다.

사용해보면 은근히 session과 비슷한 점이 많다.

client단에서 사용하는 session느낌이다.

session은 정말 훌륭한 방법이지만 계속 cookie나 webstorage로 눈을 돌리는 이유는 간단하다.

서버에 부하가 너무 많이 걸리기 때문이다.

cookie나 webstorage에 고통을 분담해버리는게 좋을 것이다.

그러나 실상은 좀 그렇지는 않은편이다.

세션은 세션만의 영역이 확고하게 존재한다.

webstorage가 cookie의 많은 점을 보완한건 맞지만 브라우저별로 데이터를 나눈다는 점은 여전하다.

그리고 cookie가 떠앉는 보안 문제는 webstorage역시 같이 가지는 경우가 많다.

그래서 session역시 사용해야할 일이 많을 것이다.

저작자표시

'Programming > CommonStory' 카테고리의 다른 글

Java에서의 가비지컬렉터(Garbage Collector:GC)돌아가는 원리 파해치기 (0)	2019.02.16
다 쓴 메모리를 자동으로 수거해주는 가바지컬렉터(Garbage Collector:GC), 기본 원리 파해치기 (2)	2019.02.15
[Web]http통신을 이용한 양방향 통신기법, hidden iframe streaming (0)	2019.01.30
[Web][조금 더 자세히]서버와 클라의 연결고리, 상태를 서버에 저장하는 http session, cookie와의 비교 (0)	2019.01.28
[Web][조금 더 자세히]도대체 왜 이름이 쿠키인걸까?, 상태를 저장하는 http cookie (0)	2019.01.27

Kamang's IT Blog

[Web][조금 더 자세히]cookie는 너무 구식아냐? 이제부턴 Web Storage!

'Programming > CommonStory' 카테고리의 다른 글

+ Recent posts

티스토리툴바