Storage : 쿠키, 세션 & 로컬

먼저, WEB STORAGE

HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있다

Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 마치 객체같군. 아니, 객체가 맞다.
그리고 LocalStorage와 SessionStorage를 따로 두어 데이터의 지속성을 구분할 수 있다.

---

What is HTML Web Storage?

With web storage, web applications can store data locally within the user's browser

• Before HTML5, application data had to be stored in cookies, included in every server request.
• Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
• Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
• Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

• 쿠키는 HTML5 이전에 활용되던 방식으로, 매 서버요청에 포함되어 전송되는 앱 데이터였다.
• 그러나 웹 스토리지를 이용하면, 보다 안전하게 + 효율적으로 + 더 큰 용량을 로컬에서만 저장해둘 수 있다. 따라서 브라우저가 매번 전송할 필요가 없어서 퍼포먼스 향상으로 이어진다.
• 특이점이라고 할만한 것은 정보가 서버로 전송되지 않는다는 점이다.
• 도메인과 프로토콜에 지정된 웹 스토리지는 개별 페이지가 아니라, 같은 도메인이나 같은 프로토콜을 사용한다면 전부 접근 가능하다.

HTML5 의 변화점들

HTML Web Storage Objects

HTML web storage provides two objects for storing data on the client:

• window.localStorage - stores data with no expiration date
• window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

이제 웹스토리지 안에 로컬과 세션 스토리지가 포함된 개념인 것이다. 이전까지는 쿠키 하나로 때우던 것을 용량이나 필요에 따라 나눠서 사요할 수 있게 되었다. 물론 기존의 쿠키또한 여전히 사용가능한 방법이다.

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

로컬 스토리지의 경우에는 유효기간이 따로 없다. 데이터는 브라우저를 종료하더라도 여전히 존재하고, 장기간 데이터를 보관해줄 수 있다.

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the specific browser tab.

세션 스토리지는 기본적으로 로컬 스토리지와 동일하게 작동하지만, 단 한번의 세션동안만 그 데이터를 저장한다. 예를 들어 브라우저의 탭에서 사용하다가도, 탭을 닫게 되면 세션 스토리지는 삭제되게 된다. 

지원 브라우저

이 버젼 이상은 되어야 지원한다

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}

현재 사용하는, 혹은 타겟으로 하는 브라우저가 지원하는지 알고싶다면 위 코드를 실행시켜보면 된다.

안된다면 쿠키뿐이다

웹스토리지가 안된다면 씁, 어쩔 수 없지

Cookies are data, stored in small text files, on your computer.

When a web server has sent a web page to a browser, the connection is shut down, and the server forgets everything about the user.

태초에 쿠키가 있었으니 그것은 자그마한 텍스트파일이었다. 사용자들이 쓰는 컴퓨터에 저장되는 데이터로, 서버가 개별 사용자들이 누구인지 모르기 때문에 식별능력을 위해 심어둔 신분증이라고 생각하면 된다.

• When a user visits a web page, his/her name can be stored in a cookie.
• Next time the user visits the page, the cookie "remembers" his/her name.

형태는 객체 형태로 되어있다. 

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

내용과 만료기간, 어디에 저장될지 경로가 설정되어있는게 보인다. 이제 서버가 쿠키를 보고 아 얘가 누구구나, 뭘 했었지, 기타등등 이런 저런 추억을 떠올릴만한 계기가 된다. 

https://www.w3schools.com/js/js_cookies.asp

JavaScript Cookies

자바스크립트에서 쿠키를 생성하거나 체크하는 것들, 대략적인 개요와 설명이 있다.