[ Web 관련 ]/자바스크립트

웹스토리지, 세션스토리지

BIZLAB 2021. 7. 28. 14:20

* 웹스토리지, 세션스토리지는 문자형(string) 데이터 타입만 지원

(JSON 형태로 데이터를 저장하는 방법이 유용함)

 

웹스토리지

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

 

JSON 저장시

localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))


JSON.parse(localStorage.getItem('json'))
{a: 1, b: 2}

 

배열로 저장시

localStorage.setItem('nums', JSON.stringify([1, 2, 3]))


JSON.parse(localStorage.getItem('nums'))
[1, 2, 3]

 

 

 

 

 

세션스토리지


// 키에 데이터 쓰기
sessionStorage.setItem("key", value);

// 키로 부터 데이터 읽기
sessionStorage.getItem("key");

// 키의 데이터 삭제
sessionStorage.removeItem("key");

// 모든 키의 데이터 삭제
sessionStorage.clear();

// 저장된 키/값 쌍의 개수
sessionStorage.length;