로컬스토리지 vs 세션스토리지

• 자바스크립트로 웹 개발을 하다보면 아무리 간단한 애플리케이션이어도 데이터를 어딘가에 저장해야 할 일이 생긴다. 보통 이럴 때 데이터베이스(DB) 서버나 클라우드 플랫폼에 데이터를 저장하는 경우가 많다.
• 하지만 저장해야 할 데이터가 별로 중요하지 않거나, 유실되도 무방한 데이터라면 서버 단에 저장하는 대신, 브라우저 상에 데이터를 저장할 수 있는 웹 스토리지 기술이 있다. 

Local Storage(영구 저장소) vs Session Storage(임시 저장소)

웹 스토리지(web storage)에는 로컬스토리지와 세션스토리지가 존재한다. 이 두개의 메커니즘의 차이점은 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있다.

세션 스토리지: 웹페이지의 세션이 끝날 때 저장된 데이터가 지워진다. windows 전역 객체의 sessionStorage 컬렉션을 통해 저장, 조회가 이루어진다. 

로컬 스토리지: 웹페이지의 세션이 끝나도 데이터가 지워지지 않는다. windows 전역 객체의 localStorage 컬렉션을 통해 저장, 조회가 이루어진다. 

// 데이터 저장하기
localStorage.setItem(key, value);

// 데이터 불러오기
localStorage.getItem(key);

// 데이터 삭제
localStorage.removeItem(key);

// 모두 삭제
localStorage.clear()

// index 해당 키 소환
localStorage.key(index);

// 저장된 항목 수
localStorage.length

로컬 스토리지의 사용법은 데이터를 저장할 땐 배열을 선언하여 각각의 정보들을 배열 요소로 추가하고, 한 이름에 대한 여러 항목들의 정보들은 객체로 저장한다. 

objArr= [{num:1, title:'name', contents:'suyeon'}, ...]

 [웹 스토리지를 사용할 때 주의할 점]

• 오직 문자형 타입(string)만 지원하기 때문에 다른 타입의 데이터를 저장하려 할 때도 문자형으로 변환한다.
• 위 문제를 피하기 위해서 많이 사용하는 방법이 바로 JSON 형태로 데이터를 읽고 쓰는 것이다. 

> localStorage.setItem('json', JSON.stringify({a:1, b:2}))
undefined
> JSON.parse(localStorage.getItme('json'))
{a:1, b:2}

→ 위와 같이 로컬 스토리지에 쓸 데이터를 JSON 형태로 직렬화하고, 읽은 데이터를 JSON 형태로 역직렬화하면 원본의 데이터를 그대로 얻을 수 있다.