📖 쿠키, 세션, 웹스토리지 추가

content/storage/README.md

@@ -0,0 +1,73 @@
+# 쿠키, 세션, 웹 스토리지
+
+`쿠키`와 `세션` 그리고 **HTML5**부터 등장하는 `웹 스토리지`에 대해서 알아보자.
+
+## 목차
+- [쿠키와 세션](#쿠키와-세션)
+- [웹 스토리지](#웹-스토리지)
+
+### 쿠키와 세션
+
+HTML5 이후부터 등장한 웹 스토리지는 데이터베이스에 저장하지 않고 **임시로 데이터를 저장**하기 위해 사용한다. 그렇다면 HTML5 이전에는 어떻게 저장했을까?
+
+HTML5 이전에는 `쿠키`와 `세션`을 사용했다.
+
+`쿠키`와 `세션`의 특징은 다음과 같다.
+
+#### 쿠키 
+* 쿠키는 `key-value` 형태로 저장되는 작은 데이터 파일이다.
+* 쿠키는 매 http request의 header에 포함되어 서버에 전송됨. 
+    > 쿠키가 커지면 매 요청마다 4KB의 쿠키를 전송해야한다는 것.
+* 쿠키의 **만료기한**을 명시할 수 있음. **브라우저가 닫혀도 유지**됨.
+
+
+#### 세션
+* 세션은 **쿠키를 기반**으로 동작한다.
+    1. 클라이언트의 요청에 의해 서버는 인증 후 *클라이언트 고유의 `session id`* 를 발급해준다.
+    2. 클라이언트는 이 `session id`를 쿠키에 저장한다.
+    3. 클라이언트는 요청마다 `session id`를 서버에 전송한다.
+    4. 서버는 `session id` 를 통해 클라이언트를 식별 후 해당하는 정보를 제공.
+* 쿠키와 다르게 서버에서 관리된다. (보안적인 면에서 쿠키보다 우수)
+* 사용자가 많을 수록 서버에서 관리하게 될 데이터가 많아지고 이는 **메모리를 많이 소모**하게 된다
+
+
+
+
+| 구분 | 쿠키 | 세션 |
+| -- | -- | -- |
+| 지속시간| 만료기한까지 | 브라우저가 닫힐 때까지
+| 관리주체 | 클라이언트(로컬) | 서버
+| 보안 | 암호화x | 쿠키보다 우수
+| 메모리 | 쿠키당 4KB까지 가능 | 사용자가 많을수록 메모리 소모상승
+
+### 웹 스토리지
+
+위에서 언급한 쿠키와 세션의 *단점을 보완* 하기 위해 등장했다.
+웹 스토리지에는 `로컬 스토리지`와 `세션 스토리지`가 있다.
+
+이 둘의 가장 큰 차이점은 `영구성`에 있다.
+
+1. `로컬 스토리지`의 데이터는 **영구적**으로 남아있다. 
+    *(사용자가 삭제하지 않는 이상)*
+2. `세션 스토리지`의 데이터는 **브라우저 창이나 탭을 닫을 때** 사라진다.
+
+이 스토리지들은 용량이 5MB~10MB 정도인데 쿠키가 4KB임을 감안하면 꽤나 큰 사이즈임을 알 수 있다.
+
+사용법은 어렵지 않다.
+둘 모두 전역객체 `window`안에 내장되어 있다.
+쿠키와 마찬가지로 `key-value` 형태로 데이터를 저장한다.
+
+> `value` 값에 객체를 저장하고자 할 때는 `JSON.stringify`를 사용하고 이를 다시 가져올 때는 `JSON.parse` 를 사용하도록 하자.
+
+```javascript
+window.localStorage.setItem('name', 'Kanté');
+
+window.localStorage.getItem('name') // 'Kanté'
+```
+
+다만, 이 둘의 차이점이 분명히 존재하기 때문에 **목적에 맞게 사용**해야할 것이다.
+
+1. *(사용자의 삭제가 없다면)* 영구적인 로컬스토리지를 통해 `자동로그인` 기능 구현하기.
+2. 브라우저가 활성화(열려있는 동안) 되어있는 동안 유효한 세션스토리지를 통해 `비회원 로그인`, `비회원 장바구니` 등 구현하기
+
+---