내일배움캠프 13일차 : 자바스크립트 로컬스토리지

오늘부터 팀 프로젝트가 시작됐다. 기존 개인 과제를 토대로 새로운 기능을 추가해서 만들어내는 과제로 로컬 스토리지를 사용해야 했다. 팀원 모두 로컬스토리지에 대한 지식이 없기에 오늘은 이 부분에 대해 공부하기로 했다.

 

Local Storage

: 데이터를 브라우저에 반영구적으로 저장하여 불러와 사용할 수 있는 저장소 (브라우저를 종료 후 재시작해도 데이터가 남아있다.)

 또한 로컬스토리지에는 문자열만 저장이 가능하다.

 

 

사용법

1. 데이터 저장 (setItem)

localStorage.setItem('key', 'value');

localStorage.setItem('username', 'Alice');

 

setItem 메소드는 로컬스토리지에 key값과 value값을 저장한다. 만약 이미 key 값이 저장되어있다면, 저장되어있던 value 값을 대체한다.

 

2. 데이터 불러오기 (getItem)

localStorage.getItem('key');

localStorage.getItem('username');

getItem 메소드는 key 값을 입력해 로컬스토리지에 저장된 value 값을 불러올 수 있다.

'username'을 통해서는 저장해 둔 value값인 Alice를 불러오게 된다.

 

 

3. 데이터 삭제하기 (removeItem)

localStorage.removeItem('key');

localStorage.removeItem('username');

removeItem 메소드는 key 값을 통해 로컬스토리지에 저장된 value 값을 삭제한다.

key 값으로 'username'을 입력해 줌으로써 value값인 'Alice'를 삭제한다.

 

4. 그 외의 메소드

• clear() : 도메인 내의 local storage 값 전체 삭제
• length : 전체 Item 개수 (const length = window.localStorage.length;)
• key() : index를 통해 key값 찾기 (window.localStorage.key(index);)

 

객체와 배열 저장하기

로컬스토리지는 문자열만 저장 가능. 그래서 객체와 배열도 문자열화 시켜줘야 한다.

const objString = JSON.stringify(obj);

const arrString = JSON.stringify(arr);

 

 

 

전체 key와 value 가져오기 (for문을 이용하여)

for(let i = 0; i < window.localStorage.length; i++) {
  const key = window.localStorage.key(i);
  const value = window.localStorage.getItem(key);
   document.write(key + " : " + value + "<br />");
}

 

length를 통해 전체 아이템의 길이를 구해 key값을 가져온다.

가져온 key값을 통해 value값도 가져온다.

 

 

이렇게 기본 개념을 정리하고 이해하더라도 막상 개발을 하려고 하면 막막한 순간이 너무 많다. 내가 유독 적용과 활용을 못하나 싶어서 튜터님께 상담을 받고 왔는데 내가 코딩을 하는데 조금 덜 막막할수 있도록 해결책을 제시해주셨다. 알고리즘 문제처럼 최대한 작게 쪼개서 하나씩 해나가면 된다고하셨다. 실제로 개발자분들도 코딩하는 시간반 생각하는 시간 반이라고하셨다. 조금씩 내가 너무 못하나싶어 의욕이 꺾여나가고 있었는데 다시 힘내서 열심히 해보려 한다. 파이팅