Web Storage API는 브라우저가 쿠키를 사용하는 것보다 훨씬 직관적 인 방식으로 키 / 값 쌍을 안전하게 저장할 수있는 메커니즘을 제공합니다. 웹 스토리지 API는 확장 Window두 가지 새로운 특성을 가진 개체를 - Window.sessionStorage와 Window.localStorage. —이 중 하나를 호출하면 데이터 항목을 설정, 검색 및 제거 할 수있는 Storage 객체의 인스턴스가 생성됩니다. sessionStorage및 localStorage각 출처 (도메인)마다 다른 저장소 개체가 사용됩니다 .
저장소 개체는 개체 와 비슷한 간단한 키-값 저장소 이지만 페이지로드를 통해 그대로 유지됩니다 .
localStorage.colorSetting = '#a4509b';
localStorage['colorSetting'] = '#a4509b';
localStorage.setItem('colorSetting', '#a4509b');
키와 값은 항상 문자열 입니다. 모든 유형convert it to String을 저장 한 다음 저장합니다. 항상Storage interface메소드를 사용하는것이 좋습니다.
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
console.log('Converting String to Object: ', JSON.parse(retrievedObject));
웹 저장소 내 두 가지 메커니즘은 다음과 같습니다.
저장소 « 로컬 저장소 는 데이터를 디스크에 쓰고 세션 저장소는 데이터를 메모리에만 씁니다. 앱이 종료되면 세션 저장소에 기록 된 모든 데이터가 제거됩니다.
가능한 최대 스토리지는 브라우저마다 차이가 있지만, 대부분의 브라우저는 W3C가 최대 저장 용량 제한 권장 적어도 구현 한 5메가바이트을 .
+----------------+--------+---------+-----------+--------+
| | Chrome | Firefox | Safari | IE |
+----------------+--------+---------+-----------+--------+
| LocalStorage | 10MB | 10MB | 5MB | 10MB |
+----------------+--------+---------+-----------+--------+
| SessionStorage | 10MB | 10MB | Unlimited | 10MB |
+----------------+--------+---------+-----------+--------+
항상 LocalStorage 보안을 유지하고 할당량 초과 오류
StorageEvent «저장 영역이 변경되면 저장 이벤트가 문서의 Window 객체에서 시작됩니다. 사용자 에이전트가 문서에 대한 스토리지 알림을 보내려면 사용자 에이전트는 StorageEvent를 사용하여 문서 오브젝트의 Window 오브젝트에서 스토리지라는 이벤트를 발생시키는 태스크를 큐에 넣어야합니다.
참고 : 실제 예는 웹 스토리지 데모를 참조하십시오 . 소스 코드를 확인하십시오
dom / Window에서 스토리지 이벤트를 수신하여 스토리지의 변경 사항을 포착하십시오. 바이올린 .
쿠키 (웹 쿠키, 브라우저 쿠키) 쿠키는 컴퓨터에서 작은 텍스트 파일에 이름-값 쌍으로 저장된 데이터입니다.
Document.cookie를 사용한 JavaScript 액세스
Document.cookie 속성을 사용하여 JavaScript를 통해 새 쿠키를 만들 수도 있고 HttpOnly 플래그를 설정하지 않으면 JavaScript에서도 기존 쿠키에 액세스 할 수 있습니다.
document.cookie = "yummy_cookie=choco";
document.cookie = "tasty_cookie=strawberry";
console.log(document.cookie);
// logs "yummy_cookie=choco; tasty_cookie=strawberry"
안전하고 HttpOnly 쿠키 HTTP 상태 관리 메커니즘
쿠키는 종종 웹 응용 프로그램에서 사용자와 인증 된 세션을 식별하는 데 사용됩니다
HTTP 요청을 수신하면 서버는 응답과 함께 Set-Cookie 헤더를 보낼 수 있습니다 . 쿠키는 일반적으로 브라우저에 의해 저장되고 쿠키 HTTP 헤더 내의 동일한 서버에 대한 요청과 함께 쿠키가 전송됩니다.
Set-Cookie: <cookie-name>=<cookie-value>
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
클라이언트가 종료되면 세션 쿠키 가 제거됩니다. Expires 또는 Max-Age 지시문을 지정하지 않습니다.
Set-Cookie: sessionid=38afes7a8; HttpOnly; Path=/
영구 쿠키 는 특정 날짜 (만료) 또는 특정 시간 (Max-Age) 후에 만료됩니다.
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
쿠키 HTTP 요청 헤더에는 Set-Cookie 헤더와 함께 서버가 이전에 보낸 저장된 HTTP 쿠키가 포함됩니다. XSS (Cross-Site Scripting)에 대한 공격을 완화하기 위해 XMLHttpRequest 및 Request API를 통해 Document.cookie 속성을 통해 JavaScript를 통해 HTTP 전용 쿠키에 액세스 할 수 없습니다.
쿠키는 주로 세 가지 목적으로 사용됩니다.
- 세션 관리 «로그인, 쇼핑 카트, 게임 점수 또는 서버가 기억해야 할 기타
- 개인화 «사용자 기본 설정, 테마 및 기타 설정
- 추적 (사용자 동작 기록 및 분석)«쿠키에는 관련 도메인이 있습니다. 이 도메인이 현재 페이지의 도메인과 동일한 경우 쿠키는 자사 쿠키라고합니다. 도메인이 다른 경우 타사 쿠키라고합니다. 자사 쿠키는 쿠키를 설정하는 서버로만 전송되지만 웹 페이지에는 이미지 나 다른 도메인 (예 : 광고 배너)의 서버에 저장된 다른 구성 요소가 포함될 수 있습니다. 이러한 타사 구성 요소를 통해 전송되는 쿠키를 타사 쿠키라고하며 주로 웹을 통한 광고 및 추적에 사용됩니다.
쿠키는 "사용자에 관한 정보를 기억하는 방법"이라는 문제를 해결하기 위해 고안되었습니다.
- 사용자가 웹 페이지를 방문하면 그의 이름을 쿠키에 저장할 수 있습니다.
- 다음에 사용자가 페이지를 방문하면 해당 페이지에 속하는 쿠키가 요청에 추가됩니다. 이런 식으로 서버는 사용자에 대한 정보를 "기억"하는 데 필요한 데이터를 얻습니다.
GitHubGist 예제
요약하면
- localStorage는 다른 탭이나 창에서 유지되며, 브라우저를 닫더라도 도메인 보안 정책 및 할당량 제한에 대한 사용자 선택에 따라 브라우저가 닫힙니다.
- 우리가 다른 탭이나 창을 통해 서핑하면 존재하지 않기 때문에 sessionStorage 객체는 탭을 닫으면 지속되지 않습니다 (최상위 브라우징 컨텍스트).
- 웹 저장소 (세션, 로컬)를 사용하면 쿠키를 통해 불가능한 많은 양의 키 / 값 쌍과 많은 텍스트를 저장할 수 있습니다.
- 민감한 작업에 사용되는 쿠키는 수명이 짧아야합니다.
- 쿠키는 주로 웹에서 광고 및 추적에 사용됩니다. 예를 들어 Google에서 사용하는 쿠키 유형을 참조하십시오 .
- 쿠키는 모든 요청과 함께 전송되므로 성능이 저하 될 수 있습니다 (특히 모바일 데이터 연결의 경우). 클라이언트 스토리지를위한 최신 API는 웹 스토리지 API (localStorage 및 sessionStorage) 및 IndexedDB입니다.
