장바구니 기능과 localStorage

변수는 새로고침 할때 마다 값을 초기화 하기때문에 영구적으로 데이터를 저장하기에는 적합하지 않다.

 

개발자 도구로 들어가면 Application 탭에 들어가보면 브라우저 저장공간이 있다.

 

Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능, object 형태와 비슷)

Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법이 좀 더럽)

Cookies (유저 로그인정보 저장공간)

Cache Storage (html css js img 파일 저장해두는 공간)

 

Local Storage / Session Storage

localStorage.setItem('이름','kim') //자료 저장하기 
localStorage.removeItem('이름') // 자료 삭제하기
console.log('로컬 저장소' + localStorage.getItem('이름'))  // 자료 꺼내기

 저장소에 값을 삭제해서 '로컬 저장소null' 이 출력된다

문자나 숫자만 저장 가능함

배열이나 그외 자료형은 문자열로 바꿔 저장함(이때 자료가 깨질 수 있음)

 

그래서 array 나 object 를 JSON으로 바꾸면 문자 취급을 받아 로컬에 저장가능함 (JSON은 따옴표친 object,array)

 

var array = [1,2,3];
var newArr = JSON.stringify(arr); // 배열은 JSON 형식으로 바꿈
localStorage.setItem(num,newArr) // 로컬에 저장함 그럼 배열 형태로 저장됨

 

이제 이걸 꺼내면 JSON 이다 그래서 다시 배열로 바꿔 사용하려면

이러면 JSON 벗어짐

var 꺼낸거 = localStorage.getItem('num')
꺼낸거 = JSON.parse(꺼낸거);

 

 

숙제 1

 

1) 구매 버튼을 누르면 그 제품명을 로컬에 저장 (배열 형태로)

 

 

    $('.buy').click(function(){
            var titles = []
            titles.push($('.product').text())
            console.log(titles)
        })

 

처음에 내가 시도한 방식이다. 

하지만 이렇게 하면 그 버튼을 누를때 해당하는 특정 상품이 아닌 

'product' 클래스에 해당하는 모든 값이 저장된다. 

 

그래서 형제요소를 선택하는 함수 siblings 를 사용해야 한다. 

 

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

 

다음 div 박스안에 4명의 형제가 있다고 생각하면 된다. 

   $('.buy').click(function(e){
          var title = $(e.target).siblings('h5').text();
          console.log(title)
        })

요렇게 하면됨 

 

클릭한 제품의 이름을 가져왔으니 이제 이걸 로컬에 담아보자 

근데 고려해야할게 처음 클릭시 바로 로컬에 저장하면 되지만 

이미 데이터가 있을경우는 데이터를 추가하는식으로 수정 해줘야한다. 

 

조건문을 사용해 로컬에 비어있으면 배열 추가하고

로컬에 데이터가 있으면 그 배열을 꺼내 추가해서 다시 넣으면 된다.

 

이때 로컬에 데이터가 있는 없느지는 콘솔을 찍으면 된다. 비어있으면 null 을 출력한다.

 

 

      if (localStorage.getItem('cart') == null) {
            localStorage.setItem('cart',JSON.stringify([title])) //비어있으면 배열생성
          } else {
              var jjson = JSON.parse(localStorage.cart) //있으면 꺼내서 JSON까서 수정하고 다시 싸서 로컬에 넣어주기
              console.log(jjson)
              jjson.push(title)
              localStorage.setItem('cart',JSON.stringify(jjson))

          }

 

 

숙제 2

이때 로컬에 저장한 값들 새로운 html 파일에서 보여주기

 

 

     var title = JSON.parse(localStorage.cart)
        
        console.log(title)
        for ( i=0 ; i < title.length; i++){

            var box = `<div>${title[i]}</div>`

            $('.wishList').append(box)
            

        }

 

배열의 길이만큼 반복해서 

각 원소를 html로 생성해줌

 

응용

1. 같은 항목을 고르면 그 항목이 추가되는게 아니라 카운트가 올라가서 선택 갯수를 기록.

 

기존은 배열이였는데 처음부터 오브젝트로 만들고 value 를 선택 횟수로 하면 될듯?

 

 

 

 

2. 아니면 이미 선택 됐다고 알려주기

 

else if (jjjson.includes(title)) {
              alert('이미골랐디')

 

배열에 선택 요소가 있는지 확인후 알려줌