localStorage 와 sessionStorage

이번 시간에는 서버없이 브라우저에서 데이터를 저장할 수 있는 공간에 대해서 알아보자!!

구매버튼 누르면, 장바구니에 상품명 추가??

이 기능을 구현하려면, 내 정보와 선택한 상품정보를 서버로 전송한 다음(Ajax 요청을 사용해서), DB에 영구적으로 저장한다.

실제 서비스를 운영하려면, 서버가 있어야하겠지만...

현재 우리는 "서버"가 없기 때문에, 데이터를 저장할 다른 공간을 알아보자!!

---

변수??

데이터를 저장하기 위한 가장 쉬운 방법은 변수이다.

let data = 0;

그러나, 변수는 페이지를 "새로고침"할 때마다 리셋된다.

그래서, 데이터를 영구적으로 저장하기 위해서 이 방법은 부적합하다.

---

Web Storage

데이터를 반영구적으로 저장할 수 있는 방법이 하나 있는데, "브라우저" 안의 저장 공간을 이용하는 것이다.

Devtool => Application 탭을 들어가보면, 여러가지 저장소들이 있다.

여기다가 몰래 데이터들을 저장할 수 있다.

다들 용도가 좀 다른데, 간단하게 알아보자!!

• localStorage, sessionStorage
  • key : value 형태로 저장 가능
• IndexedDB
  • 구조화된 대용량 데이터 저장시, 이용가능
    => 다만, 사용 방법이 좀 복잡하다.
• Cookies
  • 보통 로그인 정보 저장 (유저 인증정보)
    => 서버 개발할 때, 등장함
• Cache Storage
  • html, css, js 파일을 저장하는 곳

이번 시간에는 가장 범용적으로 쓸 수있는 localStorage, sessionStorage에 대해서 알아보자!!

---

localStorage, sessionStorage 특징

localStorage, sessionStorage 둘다 5MB 이하의 문자 데이터만 저장할 수있다.
=> array나 object는 못 집어넣음!!
=> 집어넣으려고 하면, 강제로 문자로 바꿔버린다.

5MB이면, 너무 적은 거 아닌가요??

문자만 5MB이면, 어마어마한 양이다.
=> 막 써도 용량이 초과될 일 없다.

localStorage, sessionStorage 차이점

• localStorage

  • 사이트 재접속해도 데이터가 영구적으로 유지됨.
    • (나처럼) 유저가 브라우저를 청소하지 않는 이상...

• sessionStorage

  • 사이트를 나가면, 자동삭제!!
    • 브라우저 껐다키면, 데이터 날아감!!

---

localStorage 사용법

localStorage.setItem('이름', 'kim') //자료저장하는법
localStorage.getItem('이름') //자료꺼내는법
localStorage.removeItem('이름') //자료삭제하는법

localStorage에 데이터를 저장하려면

localStorage.setItem('데이터 이름', '실제로 저장할 값');

// ex)
localStorage.setItem('cart', '나이키 운동화');

실제로 저장할 값에는 문자나 숫자만 가능하다.
"이름", 20

localStorage에 데이터를 출력하려면

localStorage.getItem('데이터 이름');
// "데이터 이름" 자리는 key 값이다. 

localStorage에 데이터를 삭제하려면

localStorage.removeItem('데이터 이름');
// "데이터 이름" 자리는 key 값이다. 

---

localStorage에 배열과 객체를 저장하는 법

localStorage에는 문자와 숫자만 저장 할 수있다고 배웠는데, array나 object도 강제로 저장시켜줄 수있다.

localStorage.setItem('num', [1,2,3]);
=> 1,2,3 (출력값), 대괄호가 사라진채 저장된다.
=> 즉, 이런 식으로 저장하면, 데이터가 깨져서 저장된다.

그!! 러!! 나!!!

array나 object를 JSON으로 바꾸면 저장가능!!

• JSON??
  • array나 object를 잠깐 문자열 취급해줌

JSON과 JSON 메서드 사용법

ex)

let arr = [1,2,3];
let newArr = JSON.stringify(arr);
localStorage.setItem('num', newArr);
// 이 값을 저장해보면, value에 [1,2,3] => 대괄호가 살아있다.

array/object => JSON은 JSON.stringify();

JSON => array/object는 JSON.parse();

더 자세한 사용법은
필자가 정리한 JSON과 JSON 메서드 사용법에서 확인하자!!

localStorage 데이터 수정

localStorage의 데이터를 직접적으로 수정해주는 Web API는 없다.

수정하려면,
1. 자료를 꺼냄
2. 꺼낸 자료를 수정함
3. 다시 집어넣음

---

sessionStorage 사용법은??

localStorage와 동일한데, localStorage 자리를 sessionStorage로 대체해주면 된다.