Storage

F12 키를 눌러 개발자 도구탭에서 주로 Console창을 확인하지만, 이번에는 Application 창에 있는 Storage에 들어가봅시다. Storage 내에 여러 목록이 있으며, 특히 Local Storage와 Session Stroage에는 웹사이트의 주소나 로컬 호스트의 프로젝트 주소가 하나의 목록으로 명시되어 있습니다. 이를 선택해보면, Key와 Value 값으로 나뉜 창을 볼 수 있습니다.
이것이 바로 브라우저에서 관리되는 데이터 저장소인 Storage입니다.
이번에는 이 Local Storage와 Session Storage에 대해 알아봅시다.

1. Local storage

Local Storage를 통해 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. 결국, 기본적으로 Local Storage에 저장되는 데이터는 해당하는 도메인 주소에 종속되어 저장됩니다. 쉽게 말해, 해당 사이트에 종속적으로 저장된다라는 의미입니다.
Local Storage의 데이터는 만료되지 않아 별도로 삭제하지 않는 이상 반영구적으로 사용할 수 있습니다. 따라서, 페이지를 닫을 때 데이터를 삭제할 필요가 있는 상황이 아니라면 주로 Local Storage의 활용성이 높습니다.

1.1 Local storage 항목 추가

localStorage.setItem ('myCat', 'Tom'); // key, value 값

저장하는 데이터를 되도록이면, 위와 같이 key, value 값을 문자 데이터 형태로 저장하는 것을 권장하며 그렇지 않은 경우 항목에 추가가 되지 않을 수 있습니다.
대표적으로 객체, 배열 데이터는 JSON 객체의 메소드인 stringify를 통해 문자 데이터화 시킨 후에 데이터를 저장하여 사용합니다. 이렇게 저장한 문자 데이터를 JSON 객체 메소드인 parse를 통해 분석하여 하나의 데이터로서 활용하는 방식으로 이용됩니다.

1.2 Local storage 추가한 항목 읽기

const cat = localStorage.getItem('myCat');

위와 같이 key값으로 Storage에 저장한 항목을 읽을 수 있습니다.

1.3 Local storage 추가한 항목 제거

localStorage.removeItem('myCat');

저장한 데이터 값을 삭제할 때에도 key 값을 입력하면 됩니다.

2. Session storage

Session Storage는 기본적으로 Local Storage 개념과 유사하며, 가장 큰 차이점은 Session Storage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지며 Local Storage는 반영구적으로 사용됩니다.

3. Storage 활용 예제

const user = {
  age: 85,
  emails: [
    'hanei100@naver.com',
    'hanei7632@gmail.com'
  ]
}

localStorage.setItem('user', JSON.stringify(user))
// 배열 데이터를 문자 데이터화시켜 user라는 key값에 저장
JSON.parse(localStorage.getItem('user'))
// 데이터 사용 시에는 문자 데이터인 user를 분석하는 JSON.parse 메소드에 입력하여 항목 읽기

const str = localStorage.getItem('user')
const obj = JSON.parse(str)
obj.age = 33
localStorage.setItem('user', JSON.stringify(obj))
// 항목 읽기 > 분석하기 > 항목 수정하기 > 문자 데이터화
// 위 단계로 저장한 데이터를 수정할 수 있음!

localStorage.remove('user')
// 저장한 데이터 삭제