local storage - 서버없이 데이터 저장하기

local storage 기능을 설명하기에 앞서, 데이터를 저장하기 가장 쉬운 방법 중 하나가 "변수"다.
하지만 변수는 페이지 새로고침시 값이 초기값으로 변한다는 단점이 존재한다.

그렇다면 데이터를 반영구적으로 저장하려면 어떤 방법을 사용해야할까?
"브라우저의 저장공간 활용"하는 것이다.

저장공간의 위치: 개발자 도구(F12)-> Application 탭

• local storage : key & value 형태로 저장 가능
• session storage : key & value 형태로 저장 가능
• indexed DB : 구조화된 대용량 데이터 저장시 사용
• cookies : 보통 유저의 로그인 정보 저장(인증 정보)
• cache storage : html, css, js 파일 저장하는 곳

	local storage	session storage
공통점	용량: 5MB	문자와 숫자만 저장가능
차이점	사이트 재접속해도 데이터 유지	사이트 나가면 데이터 자동삭제

//저장하려면 
localStorage.setItem('이름', '값')
//출력하려면
localStorage.getItem('이름')
//삭제하려면
localStorage.removeItem('이름')
//수정하려면: 수정해주는 문법이 X 따라서 3단계로 코딩해야 한다.
// 1. 자료를 꺼낸다. 2. 꺼낸 자료 수정한다. 3. 다시 넣는다.

✨기억해야 할 것!
local & session storage에 데이터가 저장될때는 문자와 숫자형태로 저장된다.

❔그렇다면 배열이나 object를 저장하는 방법은 없는걸까?
방법이 았다. JSON을 활용하면 된다.

❗여기서 JSON 이란?
array 나 object 자료를 따옴표를 입력해서 문자로 취급해주는 고마운 자료형이다.
JSON.stringify(): 문자 형태로 바꿔준다.
JSON.parse() : 배열이나 Obj 형태로 바꿔준다.

// 배열을 localStorage에 저장하려고 하면 깨져서 저장이 되지 않는다.
// 왜냐하면 localStorage는 문자와 숫자만 저장이 가능하기 때문이다. 
let arr = [1, 2, 3];
// 따라서 이와 같이 localStorage에 배열이나 obj를 저장해주려면
// 문자 형태로 바꿔주는 작업이 필요하다.
let newArr = JSON.stringify(arr);
// 아래 결과처럼 형태는 배열을 유지하고 속성은 문자 속성을 갖는다.
localStorage.setItem('num', newArr); // [1,2,3] 
// JSON을 다시 array/ object로 바꾸고 싶으면 JSON.parse를 해주면 된다.
// 다시 배열 형태로 만드는 이유는 새로운 데이터를 넣기 위함이다. (자세한 설명은 밑에서 하겠다)
JSON.parse(arr); 
// 아래 결과는 완전한 배열이다. 
console.log(JSON.parse(arr)); // [1,2,3]

<구매 버튼을 누르면 localStorage에 상품명을 저장하는 기능 구현>

1. 구매버튼을 누르면
2. 현재 누른 버튼의 상품명을 가져와서
3. localStorage에 저장

<div class="col-sm-4">
  <img src="https://via.placeholder.com/600" class="w-100" />
  <h5>${priceFilter[i].title}</h5> // 상품명 부분
  <p>${priceFilter[i].price}</p> // 가격 부분
  <button class="buy">구매</button>
</div>

// 구매 버튼을 누르면 ~~가 실행되게 해주라.
$(".buy").click(function(e){ 
	// 지금 누른버튼의 형제 요소중 h5를 가져오는데 상품명을 가져오라고 코드를 짜주었다.
	$(e.target).siblings("h5").text();
  	// .siblings() 함수는 형제 요소를 가져오는 함수이다. 
	// 위에서 배웠듯이 로컬스토리지에 저장할때 깨지지 않게 해주려면 
	// JSON.stringify()를 사용해서 문자열로 바꿔준 후 로컬 스토리지에 저장해줘야 한다. 
	// []로 감싸준 이유는 배열의 형태로 만들어주기 위함이다. 
	localStorage.setItem("cart", JSON.stringify([title])); 
})

위 기능은 구매 버튼을 처음 누르면 비어있던 로컬스토리지에 상품명이 저장되는 과정을 구현한 것이다.

이제 생각해볼 기능은 다른 상품을 추가로 로컬스토리지에 저장하려면 어떻게 해야할까? 이다.

바로 위에서 설명했던 "수정"을 해야한다. 수정하려면 총 3단계를 거쳐야한다.
1. 자료를 꺼낸다 -> localStorage.getItem(’key’)
2. 꺼낸자료를 수정한다. → 꺼낸자료에 기존에 있던 상품명을 추가해줘야함.

추가해주려면 꺼낸 자료를 다시 배열형태로 만들어준후 배열에 자료를 추가해주는 함수 .push( )를 사용하여 기존에 있던 상품명을 추가해줌.

3. 다시 넣는다.

수정한 자료를 localStorage에 깨지지않게 저장해주기 위해 JSON.stringify( )를 사용하여 로컬스토리지에 다시 저장해주면 된다.

잘 생각해보면 위의 동작방식은 조건이 필요하다.
로컬 스토리지에 아무런 값이 저장되어있지 않다면, 그냥 값을 추가해주면 된다.
하지만 1개 이상의 값이 존재하면 "수정"이라는 과정을 거쳐야한다.
그렇다면 우린 if문(조건문)을 사용해볼 수 있다.

// 로컬스토리지의 값을 가져올때 로컬 스토리지가 비어있지 않다면
if((localStorage.getItem("cart") != null){ 
	//위에서 소개한 순서들의 코드를 짜면 된다.
} else { // 그렇지 않으면( 비어있다면)
  // 로컬스토리지에 상품명을 추가해준다.
	localStorage.setItem("cart", JSON.stringify([title])); 
	// 사실상 이 코드는 버튼을 처음 클릭할때만 실행되는 코드이다. 
	// 로컬 스토리지가 비어있는 경우는 처음 상품을 로컬스토리지에 추가할때 뿐이기 때문.
}

-최종 기능 구현-

$(".buy").click(function (e) {
  let 상품명 = $(e.target).siblings("h5").text(); // 지금 누른 버튼의 상품명
  if (localStorage.getItem("cart") != null) {
	// 로컬 스토리지에 상품명이(하나라도) 저장되어 있다면
	// JSON.parse를 사용해서 꺼낸 상품명을 배열 형태로 만들어주고 (여기서의 꺼낸상품명은 첫번째 상품명이다)
    let 꺼낸상품명 = JSON.parse(localStorage.getItem("cart"));
	// 꺼낸상품명(첫번째 상품명)에 상품명(다른 버튼을 클릭해서 가져온 상품명, 즉 다른 상품명 입니다.)을 추가해준다.
    꺼낸상품명.push(상품명);
	// 총 두개의 상품명이 저장되어 있는 배열을 깨지지 않게 저장해주기 위해
	// 다시 JSON.stringify()를 사용해서 문자로 바꿔준후 로컬스토리지에 저장하면 끝!
    localStorage.setItem("cart", JSON.stringify(꺼낸상품명));
  } else { 
	// 로컬 스토리지가 비어있다면 누른 버튼의 상품명을 깨지지 않게 저장하기위해
	// JSON.stringify를 사용하여 로컬 스토리지에 저장
    localStorage.setItem("cart", JSON.stringify([상품명]));
  }
});

<장바구니 기능 구현할때 헤맸던 부분>
1. e.target을 활용하지 못했다. — 떠오르지 않았음.
2. JSON.stringify와 JSON.parse의 의미는 알았지만 어떨때 사용해야할지 감을 못잡았음
3. 조건문이 필요하다는 걸 눈치채지 못했음.
4. 기능이 어떻게 구현되는지 흐름을 파악하지 못했음.

<장바구니(로컬스토리지)에 저장되어있는 상품을 장바구니 페이지에 나타내기>
1. 새로운 html 페이지(장바구니 페이지)를 만든다.
2. 로컬 스토리지에 저장되어있는 자료를 가져온다.
3. 가져온 자료의 갯수만큼 <p>상품명<p>을 추가해준다.

<div class="add-cart">장바구니 페이지</div>

// 1. 로컬 스토리지에 저장되어있는 자료를 가져온다.
// JSON.parse()를 사용해서 배열 형태로 만들어준다.
let itemArr = JSON.parse(localStorage.getItem("cart"));
// 2. 가져온 자료의 갯수만큼 <p>상품명<p>을 추가해준다. 
// 가져온 자료의 갯수만큼 반복 실행해줘야 하기때문에 배열 반복문인 forEach를 사용.
itemArr.forEach(function(a, i){
// 백틱을 활용해 추가할 html의 형태를 직접 만들어줄 수 있다. 
	let itemElement = `<p>${i + 1}.${itemArr[i]}</p>`;
//클래스를 add-cart로 갖고 있는 div에 접근해서 html을 생성해준다. 
	$(".add-cart").append(itemElement);
})

출처. 코딩애플