자바스크립트 local Storage, Session Storage

local Storage, Session Storage

local Storage

영구적으로 데이터를 저장하는데 사용하는 방법

Session Storage

임시적으로 데이터를 저장하는 데 사용하는 방법. 데이터는 세션(Session) 동안만 유지되며, 브라우저를 닫으면 데이터가 삭제됨

관련 메소드

set Item

데이터 저장할때 사용하는 메소드

// Local Storage에 데이터 저장
localStorage.setItem('key', 'value');

// Session Storage에 데이터 저장
sessionStorage.setItem('key', 'value');

// 예시
localStorage.setItem('name', 'Lee');
localStorage.setItem('age', 20);

get item

데이터를 가져올때 사용하는 메소드

// Local Storage에서 데이터 가져오기
const valueFromLocalStorage = localStorage.getItem('key');

// Session Storage에서 데이터 가져오기
const valueFromSessionStorage = sessionStorage.getItem('key');

// 예시
const result = localStorage.getItem('age');
consol.log(typeof result); // String

removeItem

데이터를 삭제할때 사용하는 메소드

// Local Storage에서 데이터 삭제
localStorage.removeItem('key');

// Session Storage에서 데이터 삭제
sessionStorage.removeItem('key');

// 전부 삭제 
localStorage.clear(); 

// 예시
localStorage.removeItem('name'); // localStorage 속 name 삭제

JSON.stringify, JSON.parse

Storage는 문자열만 저장가능하기에, 객채를 관리하기 위한 방법

const travel = {
    destinations: ['제주', '독도', '부산'];
    days: 50;
    mate : undefined;
    isAvailable: true;
}

localStorage.setItem(travel, JSON.stringify(travel))

const data = JSON.parse(localStorage.getItem())
console.log(data.destination) // ['제주', '독도', '부산']