Javascript - LocalStorage 정리 + 로컬 스토리지 사용법

LocalStorage

・데이터를 사용자 로컬에 보존하는 방식.

・데이터를 저장, 덮어쓰기, 삭제 등 조작 가능.

・자바스크립트(JavaScript)로 조작.

・모바일에서도 사용 가능

 

쿠키와 차이점

・유효 기간이 없고 영구적으로 이용 가능

・5MB까지 사용 가능 (쿠키는 4KB까지)

・필요할 때 언제든 사용 가능 (쿠키는 서버 접속시에 자동 송신)

 

 

LocalStorage 기본 구성

・키(key)와 값(value)을 하나의 세트로 저장.

・도메인과 브라우저별로 저장.

・값은 반드시 문자열로 저장됨.

 

Session Storage =>

localStorage - 세션이 끊겨도 사용 가능.

sessionStorage - 같은 세션만 사용 가능.

 

 

LocalStorage 사용법

//localStorage 데이터 추가 방법 3가지

localStorage.Test = "Sample";
localStorage["Test"] = "Sample";
localStorage.setItem("Test", "Sample");

// 데이터 초기화

localStorage.clear();

// 데이터 취득
//LocalStorage 데이터 취득 방법 3가지

var val = localStorage.Test;
var val = localStorage["Test"];
var val = localStorage.getItem("Test");

//취득 데이터 출력
document.querySelector("#result").innerHTML = val;

//localStorage 데이터 삭제
localStorage.removeItem("Test");

 

브라우저에 저장된 로컬 스토리지 확인

 

크롬 개발자도구 열기 → Application 탭 → 왼쪽 메뉴에서 Storage > Local Storage 클릭