Local Storage와 Session Storage

🚩 Local Storage

• 저장된 데이터는 브라우저를 닫아도 계속 유지됩니다.
• 오리진(domain·port·protocol)이 같은 탭, 창 전체에서 공유
  • 한 창의 데이터를 설정하면 다른 창에서 변동 사항을 볼 수 있습니다.

 

🚩 Session Storage

• 저장된 데이터는 브라우저를 닫거나 탭을 닫으면 삭제됩니다.
• 오리진이 같은 브라우저 탭, iframe에서 공유
  • 현재 떠 있는 탭 내에서만 데이터가 유지됩니다.

 

🚩 API

두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.

Storage.setItem()

• setItem(key, value): 키-값 쌍을 보관합니다.
• getItem(key):  키에 해당하는 값을 받아옵니다.
• removeItem(key): 키와 해당 값을 삭제합니다.
• clear(): 모든 것을 삭제합니다.

 

🚩 객체 저장

키와 값은 반드시 문자열이어야 합니다. 숫자나 객체 등 다른 자료형을 사용하면 문자열로 자동 변환됩니다.

localStorage.setItem('object', { name: 'John' });
localStorage.getItem('object'); // [object Object]

 

다음 방식을 사용하여 객체를 저장할 수 있습니다.

localStorage.setItem('object', JSON.stringify({ name: 'John' }));
JSON.parse(localStorage.getItem('object')); // { name: 'John' }

 

🚩 storage 이벤트

Local Storage나 Session Storage 데이터가 갱신될 때, storage 이벤트가 실행됩니다. 다음 프로퍼티를 지원합니다.

• key: 변경된 데이터의 키(.clear()를 호출했다면 null)
• oldValue: 이전 값(키가 새롭게 추가되었다면 null)
• newValue: 새로운 값(키가 삭제되었다면 null)
• url: 갱신이 일어난 문서의 url
• storageArea: 갱신이 일어난 localStorage나 sessionStorage 객체

 

storage 이벤트는 이벤트를 발생시킨 스토리지를 제외하고 스토리지에서 접근 가능한 window 객체 전부에서 일어납니다.

• 두 개의 창에 같은 사이트를 띄워놓고 Local Storage 데이터 변경
• 두 창에서 모두 storage 이벤트를 수신하고 있기 때문에 한 창에서 데이터를 갱신하면 다른 창에서 해당 사항이 반영되는 것을 확인할 수 있습니다.

window.addEventListener('storage', function (e) {
  if (e.key === 'myData') {
    console.log('Key: ' + e.key);
    console.log('Old Value: ' + e.oldValue);
    console.log('New Value: ' + e.newValue);
    console.log('Storage Area: ' + e.storageArea);
    console.log('URL: ' + e.url);
  }
});

 

 

🚩 참고

• https://ko.javascript.info/localstorage#ref-785
• https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
• https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage