🔎Local Storage

• 웹 스토리지 객체(web storage object)로, 브라우저 내에서 키-값 쌍을 저장
• 저장된 값은 페이지를 새로고침하거나, 브라우저를 다시 실행해도 데이터가 사라지지 않음

💡setItem(key, value) : 키, 값 저장하기

• 로컬스토리지에 키-값 쌍을 저장할 때 사용
• 로컬스토리지의 키와 값은 반드시 문자열이어야 함
  숫자나 객체처럼 다른 자료형을 저장하면 문자열로 저장됨
• 다른 자료형들은 JSON.stringfy()를 활용해 문자열로 변환한 뒤 저장

배열을 저장하는 경우

const arr = ['ex1', 'ex2', 3];

// 1. 문자열로 변환한 뒤 저장
localStorage.setItem('arr_key', JSON.stringify(arr));	
// 2. 그냥 저장
localStorage.setItem('arr_key2', arr);

1. 문자열로 변환한 뒤 저장한 경우 값
   의도한대로 배열로 저장됨
   

2. 그냥 저장한 경우 값
   배열로 저장되지 않고 그냥 문자열로 저장됨
   

객체를 저장하는 경우

const obj = { ex1: '예시1', ex2: '예시2' };

// 1. 문자열로 변환한 뒤 저장
localStorage.setItem('obj_key', JSON.stringify(obj));
// 2. 그냥 저장
localStorage.setItem('obj_key2', obj);

1. 문자열로 변환한 뒤 저장한 경우 값
   의도한대로 객체로 저장됨
   
2. 그냥 저장한 경우 값
   객체로 저장되지 않고 [object Object]라는 문자열로 저장됨
   

💡getItem(key) : 키에 해당하는 값 가져오기

• 로컬스토리지에서 키에 해당하는 값을 가져올 때 사용
• 문자열로 받아옴

localStorage.setItem('str', 'example');

// getItem()은 문자열로 받아오기 때문에 저장된 값이 문자열이면 그냥 가져옴
console.log(localStorage.getItem('str'));

가져올 값이 객체나 배열인 경우

• 가져온 값을 JSON.parse()를 활용해 원하는 형태로 변경하여 사용

// 1. 그냥 가져온 경우
console.log(localStorage.getItem('arr_key'));
console.log(localStorage.getItem('obj_key'));

// 2. 가져온 값 JSON 형태로 변경하여 사용
console.log(JSON.parse(localStorage.getItem('arr_key')));
console.log(JSON.parse(localStorage.getItem('obj_key')));

• 결과
  1번 경우는 문자열로, 2번 경우는 원하는 형태로 반환됨
  

💡removeItem(key) : 키와 해당하는 값 삭제하기

• 로컬스토리지에서 키와 그에 해당하는 값을 삭제할 때 사용

// 로컬스토리지에서 key 값이 'arr_key'인 요소 삭제됨
localStorage.removeItem('arr_key');

💡clear() : 모든 키, 값 삭제하기

• 로컬스토리지의 모든 키-값 쌍을 삭제할 때 사용

localStorage.clear();

💡key(index) : 인덱스에 맞는 키 가져오기

• 로컬스토리지 내의 인덱스를 통해 키를 가져옴

// 로컬스토리지 내의 키-값 쌍들 중 n번째 인덱스를 키를 반환
localStorage.key(n);

// 응용
console.log(localStorage.getItem(localStorage.key(n)));

💡length : 로컬스토리지에 저장된 객체 개수

• 로컬스토리지 내에 저장된 객체 개수 반환

localStorage.length

---

Local Storage를 활용해 메모장을 만들어 봤는데..😚
혹시 궁금하시다면?? 🔗클릭