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

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

웹 개발 중 서버단에 저장하지 않아도 될 필수적이지 않은 데이터이지만, 가끔 필요로한 경우가 발생합니다.
그러한 경우에 굳이 DB 에 저장하지 않고 웹 스토리지에 저장하여 사용하는 방법이 있습니다.
웹 스토리지 기법에는 로컬스토리지와 세션스토리지가 있는데, 이 둘의 차이는 저장되는 범위 입니다. 그 외에는 사실상
같은 동작을 하고 있습니다.

저장 범위

로컬스토리지의 경우, 각 탭간의 데이터가 공유되며 세션이 끝나고 데이터가 사라지지 않습니다. 하지만, 브라우저가 다른 경우에는 공유되지 않습니다.
세션스토리지의 경우, 각 세션간에 데이터가 격리되어 사용되며, 각각의 데이터는 공유되지 않고 세션이 끝날시 데이터는 사라집니다.

예제

주의 해야할 점은 key, value 로 지원하지만, value 는 string 으로만 넘겨주어야 합니다.
스토리지에서 제공하는 API

Storage.key() // 주어진 숫자 n에 대하여 저장소의 n번째 항목 키를 반환합니다.
Storage.getItem() // 주어진 키에 연결된 값을 반환합니다.
Storage.setItem() // 키가 저장소에 존재하는 경우 값을 재설정합니다. 존재하지 않으면 키와 값을 저장소에 추가합니다.
Storage.removeItem() // 주어진 키를 저장소에서 제거합니다.
Storage.clear() // 저장소의 모든 키를 저장소에서 제거합니다.

// 간단한 데이터 저장
const data = ["나는 데이터 입니다.", "나는 데이터 입니다.", "나는 데이터 입니다."];
localStorage.setItem("dataKey", JSON.stringify(data));
localStorage.getItem("dataKey"); // '["나는 데이터 입니다.","나는 데이터 입니다.","나는 데이터 입니다."]'