javaScript 로컬스토리지 localStorage

1. Js LocalStorage

• 웹 브라우저에 제공하는 웹 스토리지 솔루션 중 하나로 데이터를 저장하는 데 사용된다
• 세션 스토리지와 달리 영구적으로 데이터를 보존할 수 있음 (브라우저를 닫아도 유지)
• 로컬 스토리지를 사용하면 문자열 형태로 데이터를 키 - 값으로 저장
• 사용자의 선호 설정, 최근의 작업 상태, 또는 캐싱된 데이터 등 이용 가능하다
• 개인 정보와 같은 민감한 데이터는 저장하면 안됨

// 로컬 스토리지에 데이터 저장
localStorage.setItem('사용자명', 'John Doe');

// 로컬 스토리지에서 데이터 불러오기
var 사용자명 = localStorage.getItem('사용자명');
console.log(사용자명); // John Doe

// 로컬 스토리지에서 데이터 삭제
localStorage.removeItem('사용자명');

Window.localStorage - Web API | MDN

 

2. setItem / getItem

• 로컬  스토리지에서 데이터를 읽고 쓰는데 사용하는 메서드

setItem(key, value) 

• 로컬 스토리지에 새로운 데이터를 저장한다
• key는 저장할 데이터의 식별자이며, value는 저장할 데이터 자체로 주로 문자열 형태로 저장된다
• 스트링 타입으로 join 이나 split 작업이 필요

localStorage.setItem('사용자명', 'John Doe');

getItem(key) 

• 로컬 스토리지에서 특정 키에 해당하는 데이터를 가져온다 
• key는 가져올 데이터의 식별자이다

var 사용자명 = localStorage.getItem('사용자명');
console.log(사용자명); // John Doe