[JS] localStorage 사용법을 알아보자.

localStorage란?

 

localStorage는 웹 브라우저에서 클라이언트 측에서 데이터를 저장할 수 있는 여러 메커니즘 중 하나로, 특정 네트워크 요청을 통해 값을 저장하고 불러오는 것이 아니라 key-value 쌍을 사용하여 브라우저의 리소스만을 사용해서 데이터를 저장하고 불러올 수 있다는 특징이 있다. 심지어 브라우저를 종료하고 다시 실행해도 유지되어 데이터 관리에 유용하다.

 

localStorage 다루기

로컬스토리지(LocalStorage)를 다루는 방법은 localStorage라는 객체를 사용할 때,

localStorage의 각 메서드를 활용하면 손쉽게 저장하고 불러오고 삭제하고 초기화 할 수 있다.

메서드는 다음과 같다. 

• setItem() - key, value 값 저장하기
• getItem() - 찾고자 하는 key 값 넘겨서 value 읽어 오기 (값이 있다면 String 타입의 값이 반환되고, 값이 없다면 null을 반환함)
• removeItem() - item 삭제
• clear() - localStorage 내 데이터 전체 삭제
• length() - 전체 item 개수 
• key() - index로 key 값 찾기

 

localStorage에 객체, 배열 저장하기

// localStorage에 저장할 객체
const obj = {  name : 'chanyoung',  age : 25} 

// localStorage에 저장할 배열
const arr = [1, 2, 3]; 

// 객체, 배열을 JSON 문자열로 변환
const objString = JSON.stringify(obj);
const arrString = JSON.stringify(arr); 

// setItem
window.localStorage.setItem('person', objString);
window.localStorage.setItem('nums', arrString); 

// getItem
const personString = window.localStorage.getItem('person');
const numsString = window.localStorage.getItem('nums'); 

// JSON 문자열을 객체, 배열로 변환
const personObj = JSON.parse(personString);
const numsArr = JSON.parse(numsString); 

// 결과 출력
document.write(personString); // {"name":"chanyoung","age":25}
document.write('<br/>');
document.write(personObj); // [object Object]
document.write('<br/>'); 
document.write(numsString); // [1,2,3]
document.write('<br/>');
document.write(numsArr); // 1,2,3

 

localStorage 에는 문자열만 저장된다.

따라서, localStorage에 객체나 배열를 저장하기 위해서는 객체를 문자열로 변환해서 저장해야 한다.

const objString = JSON.stringify(obj);

const arrString = JSON.stringify(arr);

여기서는 JSON.stringify() 함수를 사용하여 객체와 배열을 JSON 문자열로 변환하였다.

 

window.localStorage.setItem('person', objString);

window.localStorage.setItem('nums', arrString);

setItem()메소드를 활용해 JSON 문자열을 localStorage에 저장하였다.

 

 

정리

• 로컬스토리지는 웹 브라우저에서 사용 가능한 저장소로, 사용자가 브라우저를 닫아도 저장하나 데이터를 계속해서 유지할 수 있게 해주는 저장소이다. 
• 로컬스토리지에 값을 저장할 때에는 setItem() 메소드를 사용하며, 만약 객체 혹은 배열 형태의 데이터를 저장한다면 항상 JSON.stringify를 사용해 저장할 데이터를 JSON 문자열로 변경해주어야 한다.
• 로컬스토리지에 저장된 값을 꺼내서 사용할 때에는 getItem() 메소드를 사용하고, 저장된 데이터가 배열 혹은 객체의 형태라면 JSON.parse를 사용해 저장된 데이터를 다시 객체나 배열의 형태로 변환한 후에 사용해야 한다.