[JavaScript] 자바스크립트 localStorage 가볍게 이해하기

LocalStorage란?

LocalStorage는 웹 브라우저에서 클라이언트 측에서 데이터를 저장할 수 있는 여러 메커니즘 중 하나로, 특정 네트워크 요청을 통해 값을 저장하고 불러오는 것이 아니라 키-값 쌍을 사용하여 온전히 브라우저의 리소스만을 사용해서 데이터를 저장하고 불러올 수 있다는 특징이 있다. 심지어 브라우저를 종료하고 다시 열어도 유지된다.

---

LocalStorage 다루기

로컬스토리지(LocalStorage)를 다루는 방법은 간단하다. localStorage라는 객체를 그냥 사용하면 된다.
localStorage의 각 메서드를 활용하면 손쉽게 저장하고 불러오고 삭제하고 초기화 할 수 있다.

저장하기

저장은 setItem 이라는 메서드를 활용한다.
두 개의 파라미터를 가지는데, 키-값 순서대로 아규먼트를 넘겨주면 된다.

// setItem 메서드를 활용해 데이터 저장하기
localStorage.setItem('myName', 'bigtop');

불러오기

불러오기는 getItem이다.
로컬스토리지에서 찾고자 하는 키값을 아규먼트로 하나만 넘겨주면 된다.
그럼 해당 값이 반환되는데, 그 값을 변수에 담아 사용하면 되는 것이다.

// getItem 메서드를 활용해 데이터 불러오기
const myName = localStorage.getItem('myName');
console.log(myName) // bigtop

참고하면 좋을 부분은, 만약 값이 있다면 String 타입의 값이 반환되고 값이 없다면 null을 반환한다.
undefined가 아님에 주의하자!
아래 코드를 실행한 결과도 함께 확인해 보자

// setItem 메서드를 활용해 데이터 저장하기
localStorage.setItem('myName', 'bigtop');

// getItem 메서드를 활용해 데이터 불러오기
const myName = localStorage.getItem('myName');
console.log(myName) // ?
console.log(typeof myName) // ?
const yourName = localStorage.getItem('yourName');
console.log(yourName) // ?
console.log(typeof yourName) // ?

제거하기

제거하기는 removeItem이다. 메서드 이름들이 직관적이라서 좋다.

// removeItem 메서드를 활용해 데이터 제거하기
localStorage.removeItem('myName');

const myName = localStorage.getItem('myName');
console.log(myName) // null
console.log(typeof myName) // object

초기화(전체 제거하기)

removeItem을 통해 키-값 데이터를 하나씩 지울 수도 있지만,
clear라는 메서드를 사용하면 로컬스토리지 데이터를 한 번에 다 지울 수도 있다.
clear메서드는 그냥 호출만 하면 된다.

// clear 메서드를 활용해 데이터 제거하기
localStorage.clear();

---

LocalStorage는 개발자 도구에서도 다룰 수 있다.

크롬을 기준으로 설명하면 개발자도구 상단 여러 탭 중에 애플리케이션이라는 탭에 들어가면 왼쪽 사이드바에 여러 메뉴들이 있는데 그중에 로컬 스토리지라는 메뉴도 있는 걸 확인할 수 있다.

들어가 보면 방금 저장한 값이 있는 걸 확인할 수 있는데, 키-값의 각 테이블 빈 공간을 더블클릭하면 값을 저장할 수 있다.(setItem)

그리고 키-값이 있는 테이블 위쪽으로 조금만 시선을 이동하면 필터라는 placeholder가 있는 인풋에 값을 입력해 데이터를 검색할 수도 있으니 참고하자.

다음으로 값을 선택하고 필터 인풋 바로 우측에 있는 두 개의 버튼 중 x 버튼을 누르면 데이터를 제거할 수도 있는데, 값을 선택하고 백스페이스 키를 눌러서 제거할 수도 있다. (removeItem)

x 버튼 바로 왼쪽에 있는 동그라미 안에 사선이 있는 버튼은 로컬스토리지 전체를 비우는 clear 메서드와 같은 역할을 한다.

---

주의사항!

이처럼 간단하게 백엔드 엔지니어 도움 없이 프런트엔드 엔지니어가 브라우저의 리소스만으로 가볍게 데이터를 다룰 수 있도록 도와주는 로컬스토리지인 만큼, 주의해야 할 사항들이 있다.

 

용량 제한: LocalStorage는 브라우저마다 저장 용량 제한이 다를 수 있다. 대체로 최소 5MB 이상 지원되지만, 브라우저별로 확인이 필요하다고 한다.

민감정보 다루지 않기: LocalStorage는 브라우저의 리소스를 사용해서 굉장히 쉽게 데이터를 저장하고 활용할 수 있는 만큼, 민감한 정보를 로컬스토리지를 통해 다루는 일은 지양해야 한다. 비밀번호와 같은 중요한 정보를 다룰 때는 로컬스토리지가 아닌 다른 안전한 방법을 사용하는 것이 적절하다.