JQuery [ LocalStorage, SessionStorage ]

LocalStorage

• window.localStorage 위치
• 키 벨류 저장소
• 보안에 민감하지 않은 데이터들만 저장

  문자열, boolean, 숫자, null, undefined 등을 저장할 수 있지만 모두 문자열로 변환된다.

// === Setter === //
localStorage.setItem('key','value');
// === Getter === //
localStorage.getItem('key');
// === remove(제거) === //
localStorage.removeItem('key');
// === 전체 삭제 === //
localStorage.clear();

JSON.stringify

• 한 객체를 한번에 저장하는 방법

// === 사용하지 말아야할 setter === //
localStorage.('key',{이름 : '값', 이름: '값' });

// === Setter === //
localStorage.('key',JSON.stringify({이름 : '값', 이름 : '값'});
// === Getter === //
JSON.parse(localStorage.getItem('key'));

SessionStorage

• window.SessionStorage 위치
• 메소드가 로컬스토리지와 동일
• 데이터가 영구적으로 보관되지 않는다.

---

LocalStorage 와 SessionStorage 의 차이점

=> 데이터의 영구성

• 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 브라우저에 계속 남아있다. ( 만료기간 설정 불가능 )
• 세션스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.

---

쿠키

• 로컬스토리지와 세션스토리지가 나오기 이전 브라우저에 저장소 역할
• 만료 기한이 있는 ' 키-값 저장소 ' 이다.
• 용량 제한 O => 4KB

---

쿠키와 로컬스토리지,세션스토리지의 차이점

• 쿠키는 매 서버요청마다 쿠키도 같이 전송된다.
• 로컬스토리지와 세션스토리지의 데이터는 서버로 자동 전송되지 않는다.

---

확인방법

• 개발자도구 ( F12 ) -> 애플리케이션 클릭
  

• 로컬스토리지와 세션스토리지 확인
  

---

정리

• chap09_profile_localStorage_sessionStorage
  -> profile_storage.html, profile_storage.js, profile_storage.css