[javascript] 자바스크립트 로컬스토리지 사용 방법

참고: https://www.javascripttutorial.net/web-apis/javascript-localstorage/

이 튜토리얼에서는 Storage 타입과 javascript localStorage를 사용하여 영구 데이터를 저장하는 방법에 대해 설명합니다.

Storage 타입

Storage 타입은 key-value 쌍을 저장하도록 설계되었습니다. Storage 타입은 Object와 같은 추가 메소드를 가지고 있습니다.

• setItem(name, value) - name을 키로 값을 저장합니다.
• removeItem(name) - 이름에 해당하는 key-value 쌍을 제거합니다.
• getItem(name) - 주어진 이름에 대한 값을 가져옵니다.
• key(index) - 주어진 숫자 위치에 있는 값의 이름을 가져옵니다.
• clear() - 모든 값을 제거합니다.

Storage 객체의 key-value 쌍의 갯수를 얻으려면 length 속성을 사용할 수 있습니다. Storage 객체에는 문자열만 저장할 수 있는데 문자열이 아닌 데이터를 저장하면 문자열로 자동 변환합니다. 그러므로 Storage 객체에서 값을 가져오면 결과는 항상 문자열로 받게 됩니다.

Javascript localStorage 객체

HTML5의 localStorage는 웹 브라우저에서 만료 날짜 없이 데이터를 저장하는 방법을 제공합니다. 즉 브라우저에 저장된 데이터는 브라우저 창을 닫아도 유지됩니다.

localStorage에 저장된 데이터는 url 마다 구분됩니다. 이는 protocol://host:port 마다 유일한 localStorage가 각각 존재한다는 의미입니다.

localStorage vs. cookies

localStorage에 저장된 데이터는 쿠키처럼 매 요청 마다 서버로 전송되지 않습니다. 쿠키는 4KB 까지만 저장할 수 있는데 대부분의 현대 브라우저는 localStorage에 5MB 정도 까지 저장하게 해줍니다.

또 localStorage에 저장된 데이터는 웹 브라우저의 javascript 클라이언트에 의해 관리가 됩니다. 이는 서버에서 접근할 수 없는 값입니다. 그러나 쿠키는 웹 브라우저의 javascript와 서버가 같이 관리합니다.

locasStorage 접근

window 객체의 속성을 통해 localStorage에 접근할 수 있습니다.

window.localStorage

localStorage가 Storage 타입의 객체이기 때문에 Storage의 메소드를 호출하여 데이터를 관리할 수 있습니다.

1. setItem() 메소드

다음은 localStoragedml setItem() 메소드를 사용하여 key-value 쌍을 저장하는 예제 입니다.

window.localStorage.setItem('theme','dark');

2. length 속성

key-value 쌍의 갯수를 얻으려면 length 속성을 사용합니다.

console.log(window.localStorage.length); // 1

window 객체는 전역객체이므로 명시적으로 지정할 필요가 없습니다.

console.log(localStorage.length); // 1

3. getItem() 메소드

저장된 키 이름으로 값을 얻으려면 getItem() 메소드를 사용합니다. 다음 예제에서는 getItem() 메소드를 사용하여 theme 값을 가져오는 코드입니다.

localStorage.getItem('theme'); // 'dark'

4. removeItem() 메소드

key-value 쌍을 제거하려면 removeItem() 메소드를 사용합니다. 예를 들어

localStorage.removeItem('theme');

5. localStorage 객체 루프

다음은 테스트로 세개의 key-value 쌍을 localStorage에 저장하는 예제입니다.

localStorage.setItem('theme','light');
localStorage.setItem('backgroundColor','white');
localStorage.setItem('color','#111');

localStorage에 저장된 key-value 쌍을 루프돌리려면 Object.keys()와 for...of 문법을 사용합니다.

let keys = Object.keys(localStorage);

for(let key of keys) {
  console.log(`${key}: ${localStorage.getItem(key)}`);
}

결과:

color: #111
theme: light
backgroundColor: white

객체 저장

Storage 타입은 문자열 데이터만 저장합니다. 여기서 객체를 저장하기 위해서는 JSON.stringify() 메소드를 사용하여 문자열로 바꾼다음 저장해야 합니다. 예를 들어

const settings = {
    backgroundColor: '#fff',
    color: '#111',
    theme: 'light'
};

localStorage.setItem('settings', JSON.stringify(settings));

console.log(localStorage.getItem('settings'));

결과:

'{"backgroundColor":"#fff","color":"#111","theme":"light"}'

아래 예제는 localStorage에서 값을 가져온 다음 JSON.parse()로 다시 객체로 만드는 예제입니다.

let storedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(storedSettings);

storage 이벤트

Storage 객체를 변경하면 이벤트가 발생합니다. 이벤트는 다음의 시나리오에서 발생합니다.

• key-value 쌍을 setItem() 메소드로 저장할 때
• removeItem() 메소드로 key-value 쌍을 지울 때
• clear() 메소드로 모든 데이터를 지울 때

storage 이벤트는 다음의 속성을 가집니다.

• domain - 저장소가 변경된 도메인
• key - 저장/삭제된 key
• newValue - 새로 저장된 값 또는 지워졌을 때 null
• oldValue - 저장/삭제 하기 전의 값

stroage 이벤트를 리슨하려면 window 객체의 addEventListener() 메소드를 사용합니다.

addEventListener('storage', function(e){
   console.log(`The value of the ${e.key} changed for the ${e.domain}.`);
});

요약

• Storage 타입은 웹 브라우저에서 데이터를 저장하고 관리하는 메소드를 제공합니다.
• localStorage 객체는 Storage 타입으로 비휘발적으로 데이터를 저장할 수 있게 합니다.
• localStorage는 문자열만 저장할 수 있습니다. 객체를 저장하려면 JSON.stringify() 메소드로 문자열로 변환한 다음 저장해야 합니다. 반대로 저장된 문자열 값을 가져와서 다시 객체로 변환하려면 JSON.parse() 메소드를 사용합니다.

관련 글

자바스크립트 localStorage