[JS] localStorage와 SessionStorage 비교 & 데이터 접근 및 저장방법 & 스토리지와 JSON 저장

localStorage vs SessionStorage

웹 브라우저에서 어떠한 로직에 활용되는 데이터를 유지시키고자 한다면, 해당 데이터를 저장할 공간이 필요합니다. 웹 브라우저는 Web Storage라고 하는 저장소를 제공하는데, sessionStorage와 localStorage를 활용할 수 있습니다.

해당 storage는 local 환경에 데이터를 저장한다는 공통점을 가집니다.
또한 데이터가 객체처럼 key-value 형태로 저장이 된다는 점도 있습니다.
이때, key,value는 모두 문자열 형태로 변환되어 저장이 되어야 합니다.

이 두개의 storage는 개발자 도구에서 확인할 수 있는데요,
맥에서 단축키command + option + i 하거나, 마우스의 우측버튼을 눌러 나오는 창에서 검사를 선택하면 들어갈 수 있습니다.
애플리케이션 -> 왼쪽 바에 있는 저장용량 에 두개의 저장소를 확인할 수 있습니다.

sessionStorage

데이터를 세션 단위로 저장합니다.
세션 : 사용자가 페이지에 접속하는 순간부터 접속이 끊어지는 순간까지를 의미

즉, 새로고침 시에는 남아있지만, 해당 접속이 끊어지거나 브라우저를 종료하게 되면 해당하는 세션 저장소의 데이터를 영구히 삭제 해버립니다. --> 휘발성 데이터

localStorage

데이터를 도메인 단위로 저장하고, 해당 storage에 저장된 데이터는 도메인이 같다면 path가 다르더라도 서로 데이터를 공유하게 됩니다.

즉, 새로고침을 해도, 브라우저를 종료하더라도 그대로 남아있다는 뜻입니다. --> 비휘발성 데이터
반영구적인 데이터여서 직접 storage데이터를 삭제할 때까지 저장하게 됩니다.

localStorage로 데이터 접근 및 저장방법

1. setItem()

localStorage.setItem() : 로컬 스토리지에 접근하여 데이터를 저장하는 방법으로 내장되어 있는 메서드를 사용하면 됩니다.

-> setItem 뒤에 있는 소괄호 안에 저장할 데이터를 넣어주면 됩니다.
소괄호 안에는 두개의 인자를 넣어주면 되고 아래의 형태와 같습니다.
첫번째 인자로는 key, 두번째 인자로는 value 형태로 저장할 데이터를 담아주면 됩니다.

localStorage.setItem('data-key', 'data-value');

데이터를 활용하기 위해 저장된 데이터를 확인하고 참조할 수 있어야 하는데요,
상단에서 말한 것과 같이 개발자 도구 내에서 직접 확인할 수 있습니다.

localStorage는 도메인 단위로 데이터가 저장되고 관리되기 때문에 현재 접속해 있는 도메인의 url을 통해 저장한 데이터를 확인할 수 있습니다.

2. getItem()

localStorage.getItem('data-key');

-> 저장된 데이터를 JS에서 활용할 때 쓰이는 방법입니다.
-> localStorage 에 존재하는 데이터를 꺼내올 수 있는거죠
-> 소괄호 안에는 꺼내오고자 하는 데이터의 key를 적어주면 됩니다.

스토리지와 JSON 저장

JSON이란 ?

JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 경량 데이터 형식입니다.
주로 웹 어플리케이션에서 서버와 클라이언트 간의 데이터를 교환할 때 사용됩니다.

객체를 문자열로 바꾸어 로컬 스토리지에 저장

1. JSON.stringify()

우선 결론부터 말해보자면, localStorage는문자열만 저장 할 수 있습니다.
그래서 객체는 문자열로 바꾸는 작업이 필요한데요,

const storeFruit = () => {
  const fruit = {
    apple : 3,
    banana : 2,
    
  }
  localStorage.setItem('bag',fruit); //[object, object]
}

-> 따라서 setItem에 객체를 직접 전달하게 되면 자바스크립트는 객체를 자동으로 문자열로 변환하려고 시도합니다.
객체가 문자열로 변환될 때, [object Object]라는 값이 저장됩니다.
이는 자바스크립트 객체를 문자열로 변환할 때 기본적인 표현 방식입니다.

그래서 위의 방법이 아닌 json을 문자열로 변환해서 저장하면 됩니다.

localStorage.setItem('bag', JSON.stringify(fruit));

이런식으로 말이죠.!
이를 사용하여 변환된 JSON 문자열을 로컬스토리지에 'bag'이라는 키로 저장합니다.

로컬 스토리지에서 객체 불러오기

2. JSON.parse()

우리가 로컬스토리지에 문자열로 변환하여 저장하게 되면, 객체의key와 value에 직접적으로 접근 할 수가 없습니다.
그래서 문자열을 다시 객체로 변환하여 객체의 속성(key)에 접근하기 위해 JSON.parse()가 필요합니다.

const takeFruit = () => {
        const list = localStorage.getItem('bag'); //로컬스토리지에 저장된 JSON 문자열을 가져옵니다.
        const result = JSON.parse(list); //이 과정에서 다시 객체로 바뀌게 됩니다.
  		console.log(result.apple) // 3
      };

JSON.parse('문자열');

-> 이 방법으로 JS객체로 변환할 수 있습니다.