javascript기초(localStorage 응용)

 

 

다음과 같이 구매버튼을 만들고 구매 버튼을 눌렀을때 해당 상품명이 로컬스토리지에 담기도록 기능을 구현해보자

 

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


        if(localStorage.getItem('cart') != null){
          var 꺼낸거 = JSON.parse(localStorage.cart);
          꺼낸거.push(title);
          localStorage.setItem('cart',JSON.stringify(꺼낸거));
        } else {
          localStorage.setItem('cart',JSON.stringify([title]));
        }
      });

 

위 코드에서 siblings란 해당 요소의 형제요소를 찾아주는 기능을 한다. siblings를 이용해 'h5'를 찾고 안에 내용을 가져온다.

내용을 title이란 변수에 담고, if문을 이용해 '로컬스토리지 cart에 내용물이 존재할경우 내용을 수정해주세요',라고 코드를 작성한다.

 

 

로컬스토리지 내용물을 수정하기 위해서는 다음과 같은 순서로 진행한다.

꺼낼때는 JSON.parse로 가져오고 -> 수정 -> setItem('cart', JSON.stringfy(꺼낸거)) 순으로 로컬스토리지의 내용물을 수정한다.

 

 

다음과 같이 내용물이 로컬스토리지에 잘 들어가 있는걸 볼수있다.

응용으로 cart에 있는 내용물(장바구니 목록)을 장바구니 페이지를 만들어 목록을 볼수있게 해보자.

 

//localStorage에 있던 상품들 꺼내주세요

var up = JSON.parse(localStorage.cart)

function 장바구니(){

up.forEach(function(a,i){
    var 상품명 = `<p>${up[i]}</p>`
    $('.basket').append(상품명)
});
}

장바구니();


//꺼낸 상품 갯수만큼 <p>상품명<p>을 위에 생성해주세요

 

 

 

해당 코드로 장바구니(cart 안에 들어있는 내용물 만큼 목록이 추가된다)기능을 구현할 수 있다.