cookie,session,localStorage,sessionStorage의 차이점

1. 쿠키 및 세션
쿠키와session은 브라우저 사용자의 신분을 추적하는 세션 방식입니다.차이점:
1. 상태 유지: 쿠키는 브라우저에 저장되고session은 서버에 저장
2. 사용 방법:
(1) 쿠키 메커니즘: 만약에 브라우저에서 쿠키의 만료 시간을 설정하지 않으면 쿠키는 메모리에 저장되고 생명주기는 브라우저의 닫힘에 따라 끝난다. 이런 쿠키는 세션 쿠키라고 약칭한다.만약에 브라우저에 쿠키의 만료 시간을 설정하면 쿠키는 하드디스크에 저장되고 브라우저를 닫은 후에도 쿠키 데이터는 존재하며 만료 시간이 끝날 때까지 사라집니다.

 Cookie              ，cookie             ，           

(2)session 메커니즘: 서버가 클라이언트 요청을 받아서session 대상을 만들어야 할 때 먼저 클라이언트 요청에sessionid가 포함되어 있는지 확인한다.만약sessionid가 있다면 서버는 이 id에 따라session 대상을 되돌려줍니다.클라이언트 요청에sessionid가 없으면 서버는 새로운session 대상을 만들고 이번 응답에서sessionid를 클라이언트에게 되돌려줍니다.일반적으로 쿠키 방식으로sessionid를 클라이언트에 저장하고 상호작용에서 브라우저는 규칙에 따라sessionid를 서버에 보냅니다.사용자가 쿠키를 사용하지 않을 경우 URL을 사용하여 다시 쓰려면response를 사용할 수 있습니다.encodeURL(url)을 실행합니다.encode URL에 대한 API의 끝은 브라우저가 쿠키를 지원할 때 URL은 아무런 처리도 하지 않는다는 것입니다.브라우저가 쿠키를 지원하지 않을 때, URL을 다시 써서 세션 ID를 방문 주소로 연결합니다.(쿠키가 비활성화된 경우 URL을 사용하여 다시 작성해야 하므로 안전하지 않습니다.)
3. 내용 저장: 쿠키는 문자열 형식만 저장할 수 있고 텍스트의 방식으로만 저장할 수 있다.session은Hashtable과 유사한 데이터 구조를 통해 저장되며, 모든 종류의 대상을 지원할 수 있습니다 (session에 여러 개의 대상이 포함될 수 있습니다)
4. 저장된 크기: 쿠키: 단일 쿠키가 저장한 데이터는 4kb를 초과할 수 없습니다.세션 크기는 제한이 없습니다.
5. 안전성: 쿠키: 쿠키에 대한 공격: 쿠키 사기, 쿠키 캡처;session의 안전성은 쿠키보다 크다.
6. 응용 장면: 쿠키: (1) 사용자가 사이트에 로그인했는지 여부를 판단하여 다음에 로그인할 때 자동 로그인(또는 비밀번호를 기억하는 것)을 실현할 수 있도록 한다.만약에 우리가 쿠키를 삭제한다면 매번 로그인할 때마다 로그인에 관한 정보를 새로 기입해야 합니다.
(2) 마지막 로그인 시간과 같은 정보를 저장합니다.
(3) 마지막으로 본 페이지 저장
(4) 조회 계수session:Session은 모든 사용자의 전용 정보를 저장하는 데 사용되며 변수의 값은 서버에 저장되고SessionID를 통해 서로 다른 고객을 구분합니다.
(1) 온라인 쇼핑몰의 카트
(2) 사용자 로그인 정보 저장
(3) 특정 데이터를session에 넣고 같은 사용자의 다른 페이지에서 사용
(4) 사용자의 불법 로그인을 방지하는 7, 단점: 쿠키: (1) 크기 제한 (2) 사용자는 쿠키를 조작(비활성화)할 수 있고 기능 제한 (3) 안전성이 비교적 낮다(4) 일부 상태는 클라이언트에 저장할 수 없다.(5) 매번 방문할 때마다 쿠키를 서버에 전송하고 대역폭을 낭비한다.(6) 쿠키 데이터는 경로(path) 개념이 있어 쿠키가 특정한 경로 아래에만 속하는 것을 제한할 수 있다.
세션: (1) 세션이 저장하는 것이 많을수록 서버 메모리를 차지하기 때문에 사용자가 온라인 인원이 많은 사이트에 대해 서버의 메모리 압력이 비교적 크다.
(2) 쿠키에 의존(sessionID는 쿠키에 저장), 쿠키가 비활성화되면 URL을 사용하여 다시 작성해야 하기 때문에 안전하지 않습니다.
(3)세션 변수를 만드는 것은 매우 임의적이며 언제든지 호출할 수 있으며 개발자가 정확하게 처리할 필요가 없기 때문에session 변수를 과도하게 사용하면 코드를 읽을 수 없고 유지보수하기 어렵다.
2. WebStorage
WebStorage의 목적은 쿠키가 가져오는 제한을 극복하는 것이다. 데이터가 클라이언트에 엄격하게 통제되어야 할 때 데이터를 지속적으로 서버로 돌려보낼 필요가 없다.
WebStorage의 두 가지 주요 목표: (1) 쿠키를 제외하고 세션 데이터를 저장하는 방식을 제공한다.(2) 세션에 걸쳐 존재할 수 있는 대량의 데이터를 저장하는 메커니즘을 제공한다.
HTML5의 WebStorage는 두 가지 API를 제공합니다: localStorage(로컬 저장소)와sessionStorage(세션 저장소)입니다.
1. 생명주기: localStorage: localStorage의 생명주기는 영구적이며 페이지나 브라우저를 닫은 후에도 localStorage의 데이터는 사라지지 않습니다.localStorage는 데이터를 주동적으로 삭제하지 않으면 데이터가 영원히 사라지지 않습니다.
sessionStorage의 라이프 사이클은 현재 세션에서만 유효합니다.sessionStorage는'브라우저 창'이라는 개념을 도입했다.sessionStorage는 동원된 창에 시종 존재하는 데이터이다.이 브라우저 창이 닫히지 않으면, 페이지를 새로 고치거나 동원된 다른 페이지로 들어가도 데이터는 여전히 존재합니다.하지만sessionStorage는 브라우저 창을 닫으면 삭제됩니다.동시에 같은 창을 독립적으로 열고 같은 페이지를 열면sessionStorage도 다르다.
2. 저장 크기: localStorage와sessionStorage의 저장 데이터 크기는 일반적으로 5MB이다.
3. 저장 위치:localStorage와sessionStorage는 모두 클라이언트에 저장되어 서버와 상호작용 통신을 하지 않습니다.
4. 저장 내용 유형: local Storage와session Storage는 문자열 형식만 저장할 수 있고 복잡한 대상은 ECMAScript에서 제공하는 JSON 대상의stringify와parse로 처리할 수 있다.
5、수령방식:localStorage:window.localStorage;;sessionStorage:window.sessionStorage;.
6. 응용 장면:localStoragese: 장기 로그인(+사용자가 로그인했는지 판단)에 사용되며 장기적으로 로컬에 저장된 데이터에 적합하다.sessionStorage: 민감한 계정 일회성 로그인;
WebStorage의 이점:
(1) 저장 공간이 더 크다. 쿠키는 4KB이고 WebStorage는 5MB이다.
(2) 네트워크 데이터 절약: WebStorage는 서버에 전송되지 않고 로컬에 저장된 데이터는 직접 얻을 수 있으며 쿠키와 같은 미사 요청도 서버에 전송되지 않기 때문에 클라이언트와 서버 측의 상호작용을 줄이고 네트워크 데이터를 절약한다.
(3) 사용자가 한 페이지를 조회하는 동안만 저장하고 브라우저를 닫으면 버릴 수 있는 데이터에 대해sessionStorage는 매우 편리할 것이다.
(4) 빠른 디스플레이: 어떤 데이터는 웹스토어에 저장되고 브라우저 자체의 캐시가 추가된다.데이터를 가져올 때 로컬에서 얻는 것이 서버에서 얻는 것보다 훨씬 빨라서 속도가 더 빠르다.
(5) 보안: WebStorage는 HTTP 헤더에 따라 서버에 전송되지 않기 때문에 보안이 쿠키에 비해 비교적 높고 캡처를 걱정하지 않지만 위조 문제가 존재한다.
(6) WebStorage는 몇 가지 방법을 제공하여 데이터 조작이 쿠키보다 편리하다.

setItem (key, value) ——      ，           。

getItem (key) ——      ，     ，        value 。

removeItem (key) ——        ，           。

clear () ——         

key (index) ——        key