원본: How to Store Data in LocalStorage in JavaScript
LocalStorage API는 사용자 컴퓨터에 kay/value 타입의 데이터를 관리하는 간단한 저장소에 대한 접근을 제공합니다.
클라이언트 측에 데이터를 저장하면 서버의 데이터베이스 쿼리 수를 줄일 수 있기 때문에 웹 애플리케이션의 성능을 높이는 데 도움이 됩니다. 이를 통해 서버 리소스를 확보할 수 있으며 잠재적으로 인프라 비용을 절감할 수 있습니다.
LocalStorage가 도입되기 전에는 클라이언트에 데이터를 저장하려면 브라우저 쿠키를 사용해야 했습니다. 이 접근 방식은 효과가 있지만 몇 가지 문제가 있습니다.
첫 번째 문제는 쿠키가 4,096바이트만 저장할 수 있다는 것인데, 이는 그렇게 많은 양이 아닙니다.
또 다른 문제는 클라이언트가 서버로 보내는 모든 HTTP 리퀘스트에는 쿠키가 함께 전송된다는 것입니다. 이로 인해 리퀘스트 크기가 증가하여 대역폭 사용량이 늘어나고 요청 시간이 느려집니다.
이 포스트에서는 자바스크립트의 LocalStorage API로 데이터를 저장하는 방법을 알아보겠습니다.
Table of Contents
브라우저가 LocalStorage API를 지원하는지 확인
이는 새로운 기술이기 때문에 브라우저에서 이 API를 지원하는지 확인해야합니다. 확인 테스트 코드는 매우 간단합니다.
테스트를 위해 해야 할 일은 localStorage 인터페이스를 조건으로 가지는 간단한 “if” 문을 만드는 것입니다.
다음의 예제 스크립트를 개발자 도구에서 확인해 보겠습니다:
if (localStorage) {
console.log(LocalStorage 지원);
} else {
console.log(지원하지 않음);
}
console.log() 메소드를 통해 인터페이스 지원 여부를 출력할 수 있습니다.
브라우저가 LocalStorage를 지원하지 않는 경우 브라우저 쿠키를 사용하거나 서버에 데이터를 저장하도록 할 수 있습니다.
localStorage.setItem 데이터 저장
데이터를 저장하려면 setItem() 메소드를 사용합니다. 이 메소드는 key와 value라는 두 개의 매개변수를 받습니다.
localStorage.setItem('name', 'shinyks');
위의 이미지와 같이 setItem() 메소드를 사용하여 key/value 쌍의 데이터를 입력하면 다음의 이미지와 같이 데이터가 저장됩니다:
인터페이스에 접근하는 방법은 여러 가지가 있습니다. 이 포스트에서는 공식 사양에 설명된 기능을 사용하겠지만 인터페이스를 객체 또는 배열처럼 처리할 수도 있습니다.
다음의 예제 코드는 모두 같은 기능을 합니다:
// Functions
localStorage.setItem('name', 'shinyks');
// Object
localStorage.name = 'shinyks';
// Array
localStorage['name'] = 'shinyks';이 포스트의 나머지 부분에서는 인터페이스의 메소드만을 사용하여 설명하겠습니다.
localStorage.getItem 데이터 검색
데이터를 검색하려면 getItem() 메소드를 사용합니다.
이는 단일 매개변수를 받는데, 이는 데이터를 저장할 때 사용한 key 입니다.
const name = localStorage.getItem('name');
console.log(name);
여기서 존재하지 않는 key를 검색하면 undefined를 리턴합니다.
localStorage.removeItem 데이터 제거
데이터 저장소에서 항목을 제거하려면 removeItem() 메소드를 사용합니다.
이 함수는 삭제하려는 항목의 key를 매개변수로 받습니다.
localStorage.removeItem('name');저장소의 데이터 모두 지우기
데이터 저장소의 모든 데이터를 삭제하려면 clear() 메소드를 사용할 수 있습니다.
localStorage.clear();여러 key 검색
이 인터페이스에는 데이터 저장소에 있는 항목의 인덱스를 사용하여 항목의 키를 검색할 수 있도록 key()라는 메소드도 제공합니다.
물론 이 기능을 자주 사용하지는 않겠지만 이 기능이 있다는 것을 알아두면 유용하게 쓸 것 입니다.
아래 예제 코드는 이 메소드를 사용하여 데이터 저장소의 각 항목에 대한 키를 출력하는 방법을 보여줍니다.
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
console.log(`${key}: ${localStorage.getItem(key)}`);
};
저장소 제약
LocalStorage 저장소에 추가되는 데이터는 웹 사이트의 도메인 이름에 샌드박스 처리됩니다.
즉, 웹 애플리케이션은 다른 애플리케이션에 저장된 데이터를 볼 수 없으며 다른 애플리케이션은 이 애플리케이션에 저장된 데이터를 볼 수 없습니다. 이는 중요한 보안 조치입니다.
하위 도메인(예: a.shinyks.com, b.shinyks.com, c.shinyks.com)은 별도의 도메인으로 처리되므로 자체 데이터 저장소가 생성됩니다.
저장소에 넣을 수 있는 데이터의 양 역시 제한이 있습니다. 이 제한은 브라우저 공급업체에서 설정하므로 브라우저마다 다릅니다.
브라우저 호환성을 고려하여 웹 애플리케이션의 저장 공간은 2.5MB 정도라고 생각하고 개발하는게 좋을 것 입니다.
SessionStorage 사용 방법
LocalStorage에 저장된 데이터는 영구적입니다. 즉, 데이터를 저장하고 브라우저를 닫은 다음 애플리케이션을 다시 열면 모든 데이터를 계속 검색할 수 있습니다.
그러나 사용자 세션 동안에만 데이터를 저장하고 싶을 때도 있습니다.
이 경우 SessionStorage 인터페이스를 사용할 수 있습니다. 여기에는 localStorage와 동일한 기능이 모두 포함되어 있지만 사용자가 브라우저 탭을 닫으면 저장한 데이터가 자동으로 지워집니다.
// 데이터 저장
sessionStorage.setItem('name', 'shinyks');
// 데이터 검색
const name = sessionStorage.getItem('name');
// 데이터 제거
sessionStorage.removeItem('name');
// 항목의 key 가져오기
sessionStorage.key(n);
// 저장소의 데이터 모두 지우기
sessionStorage.clear();정리
LocalStorage API는 오프라인 애플리케이션을 위한 데이터 저장소를 제공하여 웹 애플리케이션 성능을 크게 향상시킬 수 있습니다.
이 인터페이스로 HTML5 모바일 애플리케이션에 어떻게 적용할 지 잠재적인 능력에 대해 생각해 봐야 합니다.
모바일 장치는 인터넷에 연결되지 않아 기존 서버 데이터에 액세스할 수 없는 경우가 있기 때문입니다.