JS 브 라 우 저 저장

머리말
전단 에 대한 이해 가 깊 어 지면 서 Cookie,LocalStorage 등 여러 가지 브 라 우 저의 저장 방안 을 알 게 되 었 습 니 다.어떤 저장 방안 이 어떤 차이 점 이 있 는 지,각각의 적용 장면 은 무엇 입 니까?
Cookie
쿠키 의 출처
쿠키 가 만들어 진 본 의 는 로 컬 저장 이 아니 라 사용자 의 신분 을 판별 하기 위 한 것 이다.Http 프로 토 콜 은 무상 태 로 알려 져 있 습 니 다.즉,서버 에 보 낼 때마다 요청 이 서버 에 고립 되 어 있 습 니 다.서버 는 이 요청 이 누구 에 게 서 왔 는 지 모 릅 니 다.예 를 들 어 카 트 에 상품 을 추 가 했 지만 결제 요청 을 보 냈 을 때 서버 가 멍 해 졌 습 니 다.당신 이 누구 인지,무엇 을 샀 는 지 어떻게 알 겠 습 니까?쿠키 를 사용 하면 서버 는 쿠키 를 확인 함으로써 발송 사용 자 를 판단 할 수 있 으 며,어느 정도 쿠키 는 요청 한 신분증 이 라 고 할 수 있다.서버 에서 누 구 를 보 내 달라 고 요청 하 는 지 알려 줄 수 있 습 니 다.
쿠키 가 뭐 예요?
백 번 듣 는 것 보다 한 번 보 는 것 이 낫다.직접 쿠키 가 어떻게 생 겼 는 지 보 자.

이것 은 바 이 두 의 첫 페이지 에서 사용 하 는 Cookie 입 니 다.보시 다시 피 Cookie 는 name-Value 키 로 브 라 우 저 에 저 장 된 것 입 니 다.그 중에서 Value 는 암호 화 된 데 이 터 를 뚜렷하게 거 쳤 습 니 다.
쿠키 생 성 방식
쿠키 가 도 메 인 이름 에 속 하 는 지,바 이 두 첫 페이지 의 쿠키 인지,도 메 인 속성 을 통 해 앞의 두 쿠키 가.baidu.com 에 속 하 는 지 알 수 있 습 니 다.

각 도 메 인 이름 은 자신의 도 메 인 이름 에 있 는 쿠키 만 설정 하고 접근 할 수 있 습 니 다.예 를 들 어 baidu.com 은 domain 이 sougou.com 인 쿠키 를 방문 할 수 없습니다.그러나 하위 도 메 인 이름 은 부모 도 메 인 이름 이 설정 한 쿠키 를 읽 을 수 있 습 니 다.예 를 들 어 캡 처 에서 www.baidu.com 에서 Domain='baidu.com'의 쿠키 를 읽 었 습 니 다.Domain 을 수 동 으로 설정 하면 부모 도 메 인의 쿠키 를 설정 할 수 있 습 니 다.예 를 들 어 www.baidu.com 에서 Domain='baidu.com'을 설정 할 수 있 습 니 다.이렇게*.baidu.com 의 2 급 도 메 인 이름 도 설정 한 쿠키 를 읽 을 수 있 습 니 다.

//www.baidu.com

document.cookie='age=20;domain=.baidu.com'

//                    Cookie

쿠키 생 성 방식 은 서버 쪽 생 성과 브 라 우 저 쪽 생 성 으로 나 뉜 다.
서버 쪽-http response header 의 set-cookie 설정 을 통 해
저 희 는 헤더 의 Set-Cookie 에 응답 하여 저장 할 Cookie 값 을 지정 할 수 있 습 니 다.브 라 우 저 를 되 돌려 달라 고 요청 할 때 브 라 우 저 는 header 의 set-cookie 값 에 따라 Cookie 를 설정 합 니 다.기본적으로 Domain 은 Cookie 페이지 를 설정 하 는 호스트 이름 으로 설정 되 어 있 습 니 다.물론 Domain 의 값 도 수 동 으로 설정 할 수 있 습 니 다.
Set-Cookie: id=a3fWa;
브 라 우 저 엔 드-js 에 서 는 document.cookie 를 통 해 쿠키 를 읽 고 쓸 수 있 으 며 키 값 이 맞 는 형식 으로 보 여 줍 니 다.

document.cookie="id=a3fWa"
document.cookie='age=20;domain=.baidu.com'

Cookie 의 응용 장면
쿠키 의 역할 이 서버 요청 이 누구 에 게 서 왔 는 지 알려 주 는 것 인 만큼 가장 큰 역할 은 사용자 로그 인 상 태 를 유지 하 는 것(비밀번호 기억)이 며,이외에 도 사용자 조회 데 이 터 를 기록 해 광고 푸 시와 앞서 언급 한 카 트 등 을 진행 할 수 있다.
쿠키 의 단점
결점 은 사실 앞에서 매우 분명 하 다.
크 지 않다
Cookie 는 매번 요청 에 따라 발송 되 므 로 Cookie 는 반드시 엄격 한 크기 제한 이 있 습 니 다.모든 Cookie 의 크기 는 4kb 로 제한 되 어 있 습 니 다.주의해 야 할 것 은 4kb 는 name-Value 의 크기 를 말 합 니 다.이 도 메 인 이름 으로 설정 할 수 있 는 Cookie 의 크기 는 4kb 만 있 는 것 이 아 닙 니 다.
성능 결함
Cookie 는 도 메 인 이름 에 따라 모든 도 메 인 이름 에 따라 전송 을 요청 하지만 사실은 많은 요청 을 합 니 다.예 를 들 어 그림 등 정적 자원 에 대한 요청 은 Cookie 가 전혀 필요 하지 않 습 니 다.모든 Cookie 는 4kb 만 있 지만 적 게 쌓 이면 커 다란 자원 낭 비 를 가 져 올 수 있 습 니 다.
우 리 는 정적 자원 을 CDN 에 올 릴 수 있 습 니 다.이때 그림 도 메 인 이름 은 홈 도 메 인 이름과 다 르 기 때문에 Cookie 를 추가 로 보 내지 않 습 니 다.
안전 하지 못 하 다
위 글 에서 직접 콘 솔 을 열 면 쿠키 를 볼 수 있 듯 이 쿠키 는 인 코딩 을 통 해 암호 화 되 었 지만,Http 전송 에 서 는 명문 으로 전송 되 고 스 크 립 트 도 쿠키 를 쉽게 가 져 올 수 있어 쉽게 풀 릴 수 있다.
서버 측 에서 Cookie 를 설정 할 때 HttpOnly 표 시 를 추가 하면 브 라 우 저 측 에서 document.cookie 를 사용 하여 이 Cookie 에 접근 할 수 없습니다.
Set-Cookie: id=a3fWa; HttpOnly
Secure 로 표 시 된 쿠키 는 Https 프로 토 콜 을 통 해 암호 화 된 요청 으로 만 발송 해 야 하지만 그래도 쿠키 를 사용 해 민감 한 정 보 를 저장 해 서 는 안 된다.쿠키 는 고유 한 불안정 성 을 가지 고 있 기 때문에 이 두 표 시 는 정확 한 안전 보장 을 제공 할 수 없다.
해결 방법
쿠키 가 이렇게 단점 이 많은 데 영원히 편 하 게 해결 할 수 있 는 방법 이 있 습 니까?바로'전문 적 인 사람 이 전문 적 인 일 을 합 니 다'입 니 다.
사용자 로그 인 상태 와 일부 사용자 정 보 를 저장 하 는 작업 은 Seesion-즉,Cookie 는 한 사용자 의 유일한 식별 자 만 저장 하고 진정한 정 보 는 서버 에 저장 하 며 Cookie 를 SeesionID 로 서버 에 정 보 를 찾 습 니 다.그러면 Cookie 의 용량 제한,안전 문 제 는 모두 해결 되 었 습 니 다.이때 쿠키 안 에는 의미 없 는 랜 덤 코드 가 들 어 있 기 때문이다.
로 컬 저장 작업 은 html 5 에 로 컬 저장 소 를 추가 하 는 솔 루 션 인'웹 스토리 지'에 맡 기 고 두 가지 로 나 뉜 다.localStorage 와 SessionStorage 이다.그 다음 에 이 두 형 제 를 소개 한다.
LocalStorage
특징.
수 동 으로 삭제 할 때 까지 데 이 터 를 장시간 저장 합 니 다크기 는 약 5M

쿠키 와 마찬가지 로 한 사 이 트 는 자신의 사이트 도 메 인 이름 아래 의 데이터 만 방문 하고 조작 할 수 있 습 니 다

클 라 이언 트 에서 만 사용 하고 서버 와 통신 이 없습니다인터페이스 패키지 가 비교적 좋다.
키 값 을 사용 하여 정 보 를 저장 합 니 다

같은 소스 창 에 접근 할 수 있 습 니 다

사용 예시
LocalStorage 사용 이 매우 편리 합 니 다.

//     
localStorage.setItem("key","value");
//    
let valueLocal = localStorage.getItem("key");

필드 사용
위의 특성 을 통 해 알 수 있 듯 이 LocalStorage 는 로 컬 캐 시 에 매우 적합 하고 첫 화면 로드 속 도 를 높 일 수 있 습 니 다.일부 그림 등 자주 바 뀌 지 않 는 큰 자원 도 캐 시 해 네트워크 요청 을 줄 일 수 있다.
SeesionStorage
특징.

저장 시간 은 이번 세 션 입 니 다.즉,창 이 닫 히 면 없어 집 니 다

이 창 만 접근 할 수 있 고 같은 소스 의 다른 창 은 크 지 않 습 니 다

약 5M필드 사용
session Storage 는 수명 주기 와 동기 화 된 세 션 등급 의 정 보 를 저장 하 는 데 더욱 적합 합 니 다.이 정 보 는 현재 세 션 에 만 적 용 됩 니 다.예 를 들 어 폼 데이터 의 지속 화 를 통 해 새로 고침 후 폼 데이터 가 손실 되 는 것 을 방지 할 수 있 습 니 다.
Cookie,LocalStorage 와 SessionStorage 간 의 차이
역할 영역의 차이
이 세 가 지 는 모두 프로 토 콜,즉 같은 프로 토 콜,같은 도 메 인 이름,같은 포트 에서 만 같은 데 이 터 를 방문 하고 수정 할 수 있 습 니 다.유일 하 게 다른 것 은 SeesionStorage 가 같은 창 에 있어 야 한 다 는 것 입 니 다.
생명주기 의 차이

쿠키 는 수 동 으로 만 료 시간 을 설정 할 수 있 습 니 다.기본 값 은 이번 세 션 의 시간 이 길 고 창 이 닫 히 면서 삭 제 됩 니 다.만 료 시간 이 설정 되면 하 드 디스크 에 저장 되 고 만 료 시간 이 될 때 까지 삭 제 됩 니 다

LocalStorage 는 지속 적 인 로 컬 저장 소 입 니 다.수 동 으로 삭제 하지 않 으 면 계속 존재 합 니 다

SessionStorage 는 세 션 단계 의 저장 소 이자 창 이 닫 히 면서 삭 제 됩 니 다

총결산
이것 이 바로 몇 가지 브 라 우 저 저장 방안 입 니 다.물론 우 리 는 서로 다른 방안 의 특징 에 따라 언제 어떤 방안 을 사용 할 지 결정 해 야 합 니 다.적합 한 것 이 가장 좋 습 니 다.본문의 몇 가지 중점 을 총괄 해 보다

쿠키 의 본 업 무 는 로 컬 저장 소 가 아니 라'상태 유지'입 니 다

웹 스토리 지 는 html 5 가 브 라 우 저 저장 을 위해 제공 하 는 데이터 저장 체제 로 서버 와 통신 하지 않 습 니 다이상 은 JS 브 라 우 저 저장 에 대한 상세 한 내용 입 니 다.JS 브 라 우 저 저장 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!