[JavaScript] localStorage 사용하기

localStorage

• Web Storage의 방식중 하나로 사용자의 로컬 저장소에 키-값을 저장할 수 있다. 
• 브라우저를 닫았다 열어도 데이터가 사라지지 않는다. 
• 유효기간 없이 데이터를 저장한다.
• 도메인과 브라우저별로 저장된다.
• 값은 반드시 문자열로 저장된다.
• JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장데이터를 지워야만 삭제할 수 있다.

window.localStorage에 접근하게 되면 Storage 객체의 인스턴스를 생성하게 되고, 이를 사용해 데이터 항목을 브라우저 내에 추가 또는 제거하거나 읽어올 수 있다. 

 

데이터 추가하기 : setItem()

window.localStorage.setItem(key, value)

 

💡 배열이나 객체를 저장해야할때

localStrorage에는 문자열만 저장할 수 있으므로, 배열이나 객체를 저장해야할때는 문자열로 변경해야한다. 

=> JSON.stringfy() 를 사용해서 객체와 배열을 JSON 문자열로 변환할수있다. 

읽어올때는 JSON.parse() 메서드를 이용해 다시 변환하면 된다. 

 

데이터 읽어오기 : getItem()

window.localStorage.getItem(key)

 

데이터 삭제하기

특정 키를 찾아서 삭제하기 : removeItem()

window.localStorage.removeItem(key)

 

값 전체 삭제하기 : clear()

window.localStorage.clear()