JavaScript 로 컬 저장:localStorage,sessionStorage,쿠키 사용

javaScript 는 세 가지 데이터 저장 방식 이 있 습 니 다.각각:

sessionStorage

localStorage

cookier

1. sessionStorage

sessionStorage 는 현재 세 션 에서 만 유효 하 며 페이지 나 브 라 우 저 를 닫 은 후에 삭 제 됩 니 다

setItem(key,value)설정 데이터

getItem(key)데이터 획득

removeItem(key)데이터 제거

clear()모든 값 제거

<script>
  //     
  window.sessionStorage.setItem("name","  ")
  window.sessionStorage.setItem("age",18)
  //     
  console.log(window.sessionStorage.getItem("name")) //   
  //       
  window.sessionStorage.removeItem("gender")
  //       
  window.sessionStorage.clear()
</script>

2. localStorage

localstorage 는 HTML 5 표준 에 새로 추 가 된 기술 로 전체 사이트 의 데 이 터 를 오래 저장 하고 저 장 된 데 이 터 는 수 동 으로 삭제 할 때 까지 만 료 되 지 않 습 니 다

localStorage 와 sessionStorage 의 최대 크기 는 보통 5MB 이 고 클 라 이언 트(즉 브 라 우 저)에 만 저장 되 며 서버 와 의 통신 에 참여 하지 않 습 니 다

setItem(key,value)설정 데이터

getItem(key)데이터 획득

removeItem(key)데이터 제거

clear()모든 값 제거

<script>
  //     
  window.localStorage.setItem("name","  ")
  window.localStorage.setItem("age",20)
  window.localStorage.setItem("gender"," ")
  //     
  console.log(window.localStorage.getItem("name")) //   
  //       
  window.localStorage.removeItem("gender")
  //       
  window.localStorage.clear()
</script>

3. cookier
간단 한 소개
Cookie 는 컴퓨터 에 저 장 된 텍스트 파일 에 웹 페이지 의 사용자 정 보 를 저장 하 는 데 사용 되 는 데이터 입 니 다.
Cookie 데 이 터 는 키 쌍 으로 존재 하 며,키 쌍 마다 만 료 시간 이 있 습 니 다.시간 을 설정 하지 않 으 면 브 라 우 저가 닫 히 면 쿠키 가 사라 집 니 다.물론 사용자 도 수 동 으로 쿠키 를 제거 할 수 있 습 니 다.
 쿠키 는 매번 HTTP 헤드 에 지 니 고 있 으 며,쿠키 를 사용 하여 데 이 터 를 너무 많이 저장 하면 성능 에 문제 가 생 길 수 있 습 니 다.
Cookie 메모리 크기 가 제한 되 어 있 습 니 다.일반적으로 도 메 인 마다 4K 정도 이 고 도 메 인 마다 키 쌍 을 50 개 정도 저장 할 수 있 습 니 다.
기본 조작
 document.cookie 를 방문 하면 쿠키 를 만 들 고 수정 하 며 가 져 올 수 있 습 니 다.
 기본 적 인 상황 에서 쿠키 는 브 라 우 저 가 닫 혔 을 때 삭 제 됩 니 다.쿠키 의 키 값 에 만 료 시간 을 추가 할 수 있 습 니 다.
 새로운 쿠키 를 설정 할 때 어떤 key 가 존재 하면 이 key 에 대응 하 는 값 을 업데이트 합 니 다.그렇지 않 으 면 쿠키 에 동시에 존재 합 니 다.

<script>
  //   cookie
  document.cookie = "username=orochiz"
  document.cookie = "age=20"
 
  //   cookie
  var msg = document.cookie
  console.log(msg) // username=orochiz; age=20
 
  //       （  ： ）
  var d = new Date() //      2019-9-25
  var days = 3    // 3 
  d.setDate(d.getDate() + days)
  document.cookie = "username=orochiz;"+"expires="+d
 
  //   cookie （             ）
  d.setDate(d.getDate() - 1)
  console.log(document.cookie)
</script>

총결산
공통점:브 라 우 저 에 저 장 됩 니 다.아래 그림 위치 에서 저 장 된 정 보 를 볼 수 있 습 니 다.

다른 점:
① 전달 방식 이 다르다
쿠키 데 이 터 는 항상 같은 소스 의 http 요청 에 휴대 되 어 있 습 니 다(필요 하지 않 더 라 도).즉,쿠키 는 브 라 우 저 와 서버 사 이 를 오 가 며 전 달 됩 니 다.
session Storage 와 localStorage 는 서버 에 데 이 터 를 자동 으로 보 내지 않 고 로 컬 에 만 저장 합 니 다.
② 데이터 크기 가 다르다
쿠키 데이터 와 경로(path)의 개념 이 있어 쿠키 가 특정한 경로 에 만 속 하 는 것 을 제한 할 수 있 습 니 다.
 저장 크기 제한 도 다 릅 니 다.쿠키 데 이 터 는 4k 를 초과 할 수 없습니다.또한 http 요청 때마다 쿠키 를 휴대 하기 때문에 쿠키 는 세 션 표지 와 같은 작은 데이터 만 저장 하기에 적합 합 니 다.
sessionStorage 와 localStorage 도 저장 크기 에 제한 이 있 지만 쿠키 보다 훨씬 커서 5M 이상 에 이 를 수 있 습 니 다.
③ 데이터 유효기간 이 다르다
session Storage:현재 브 라 우 저 창 이 닫 히 기 전에 만 유효 하 며 오래 유지 할 수 없습니다.
localStorage:항상 유효 합 니 다.창 이나 브 라 우 저 를 닫 아 도 저장 되 기 때문에 영구적 인 데이터 로 사용 합 니 다.
쿠키 는 창 이나 브 라 우 저가 닫 히 더 라 도 설 정 된 쿠키 가 만 료 되 기 전 까지 만 유효 합 니 다.
④ 역할 영역 이 다르다
session Storage 는 같은 페이지 라 도 다른 브 라 우 저 창 에서 공유 하지 않 습 니 다.
localstorage 는 모든 원본 창 에서 공 유 됩 니 다.
쿠키 도 모든 동원 창 에서 공 유 됩 니 다.
웹 Storage 는 이벤트 알림 체 제 를 지원 합 니 다.데이터 업데이트 알림 을 감청 자 에 게 보 낼 수 있 습 니 다.
웹 Storage 의 api 인 터 페 이 스 를 사용 하 는 것 이 더욱 편리 합 니 다.
자 바스 크 립 트 로 컬 저장:localStorage,sessionStorage,쿠키 사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 로 컬 저장 내용 에 대해 서 는 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 을 바 랍 니 다!