LocalStorage

로컬스토리지의 정의

서버에 저장하지 않고 클라이언트 개별적으로 브라우저에 데이터를 저장할 수 있다.

그 저장소를 ‘클라이언트 스토리지’라고 하는데, 우리가 흔히 아는 cookies도 클라이언트 스토리지이고 이번 글에서 다룰 로컬스토리지가 있다.

간단한 프로젝트를 하거나, 데이터 양이 많지 않고, 사용자 별로 데이터의 공유가 필요 없다고 하면 서버에 저장하는 것은 낭비일 수 있다.

 

로컬스토리지를 사용하면 브라우저에 key와 value 값으로 저장할 수 있다.

즉, 같은 컴퓨터, 같은 브라우저가 아니면 다른 저장소를 갖는다는 의미이다.

또한, 로컬스토리지가 저장될 때는 문자열로만 저장할 수 있다.

(객체나 배열 같은 경우는 JSON.stringify()를 통해 문자열로 저장하고, 꺼낼 때 JSON.parse()를 통해 배열로 다시 변환해줘야 한다.)

 

 

 

로컬스토리지에 저장

로컬스토리지에 저장할 때는 setItem()를 쓴다.

key와 value로 저장되기 때문에 setItem()에 key와 value를 인자로 주면 된다.

window.localStorage.setItem(key, value);

위에서 말했다시피 value에 들어가는 값은 문자열이어야 한다.

객체나 배열을 저장하고 싶으면 JSON.stringify()를 통해 문자열로 변환 후 저장해야 한다.

(숫자도 문자열로 저장된다.)

또한, key값이 이미 로컬스토리지에 저장된 key값이면 덮어쓰기 때문에 주의해야 한다.)

 

 

 

로컬스토리지에 저장된 값의 수

로컬스토리지에 저장된 값의 수는 length를 통해 알 수 있다.

window.localStorage.length;

 

 

 

로컬스토리지에 저장된 값 읽기

로컬스토리지에 저장된 값을 읽을 때는 getItem()를 쓴다.

key를 통해 value를 찾을 수 있기 때문에 getItem()에 key를 인자로 주면 된다.

window.localStorage.getItem(key);

마찬가지로 위에서 말했다시피 value에 저장된 값은 문자열이다.

문자열로 변환되어 저장된 객체나 배열을 다시 변환시키려면 JSON.parse()를 이용하면 된다.

 

 

 

로컬스토리지에 저장된 key 찾기

로컬스토리지에 저장된 key값을 찾을 때는 key()를 쓴다.

key값을 찾을 때는 index를 이용하기 때문에 key()에 index를 인자로 주면 된다.

window.localStorage.key(index)

 

 

 

로컬스토리지에 저장된 value 수정

로컬스토리지에 저장된 value를 수정할 때는 따로 함수가 없고, key를 통해 value를 가져오고, 수정한 다음 다시 저장해야 한다.

_value = window.localStorage.getItem(key);

// _value 수정 코드

window.localStorage.setItem(key, _value);

 

 

 

로컬스토리지에 저장된 값 삭제

로컬스토리지에 저장된 값을 삭제할 때는 removeItem()을 쓴다.

key를 통해 삭제할 수 있기 때문에 removeItem()에 key를 인자로 주면 된다.

window.localStorage.removeItem(key);

 

 

 

로컬스토리지의 전체 값 삭제

로컬스토리지의 모든 값을 삭제할 때는 clear()를 쓴다.

window.localStorage.clear();

 

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)