이번 시간에는 서버없이 브라우저에서 데이터를 저장할 수 있는 공간에 대해서 알아보자!!
이 기능을 구현하려면, 내 정보와 선택한 상품정보를 서버로 전송한 다음(Ajax 요청을 사용해서), DB에 영구적으로 저장한다.
실제 서비스를 운영하려면, 서버가 있어야하겠지만...
현재 우리는 "서버"가 없기 때문에, 데이터를 저장할 다른 공간을 알아보자!!
데이터를 저장하기 위한 가장 쉬운 방법은 변수이다.
let data = 0;
그러나, 변수는 페이지를 "새로고침"할 때마다 리셋된다.
그래서, 데이터를 영구적으로 저장하기 위해서 이 방법은 부적합하다.
데이터를 반영구적으로 저장할 수 있는 방법이 하나 있는데, "브라우저" 안의 저장 공간을 이용하는 것이다.
Devtool
=> Application
탭을 들어가보면, 여러가지 저장소들이 있다.
여기다가 몰래 데이터들을 저장할 수 있다.
다들 용도가 좀 다른데, 간단하게 알아보자!!
key : value
형태로 저장 가능이번 시간에는 가장 범용적으로 쓸 수있는 localStorage, sessionStorage에 대해서 알아보자!!
localStorage, sessionStorage 둘다 5MB 이하의 문자 데이터만 저장할 수있다.
=> array나 object는 못 집어넣음!!
=> 집어넣으려고 하면, 강제로 문자로 바꿔버린다.
문자만 5MB이면, 어마어마한 양이다.
=> 막 써도 용량이 초과될 일 없다.
localStorage
sessionStorage
localStorage.setItem('이름', 'kim') //자료저장하는법
localStorage.getItem('이름') //자료꺼내는법
localStorage.removeItem('이름') //자료삭제하는법
localStorage.setItem('데이터 이름', '실제로 저장할 값');
// ex)
localStorage.setItem('cart', '나이키 운동화');
실제로 저장할 값에는 문자나 숫자만 가능하다.
"이름", 20
localStorage.getItem('데이터 이름');
// "데이터 이름" 자리는 key 값이다.
localStorage.removeItem('데이터 이름');
// "데이터 이름" 자리는 key 값이다.
localStorage에는 문자와 숫자만 저장 할 수있다고 배웠는데, array나 object도 강제로 저장시켜줄 수있다.
localStorage.setItem('num', [1,2,3]);
=> 1,2,3 (출력값), 대괄호가 사라진채 저장된다.
=> 즉, 이런 식으로 저장하면, 데이터가 깨져서 저장된다.
그!! 러!! 나!!!
array나 object를 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의 데이터를 직접적으로 수정해주는 Web API는 없다.
수정하려면,
1. 자료를 꺼냄
2. 꺼낸 자료를 수정함
3. 다시 집어넣음
localStorage와 동일한데, localStorage 자리를 sessionStorage로 대체해주면 된다.