개요

이번 포스트에서는 자바스크립트의 Local Storage를 이용하여 간단한 쇼핑 카트를 구현하는 방법을 알아보겠습니다. Local Storage는 웹 브라우저에 데이터를 저장하는 기능을 제공해주어서, 쇼핑 카트와 같은 중요한 데이터를 유지하는 데에 유용합니다.

Local Storage란?

Local Storage는 웹 브라우저에서 제공하는 클라이언트 사이드 저장소입니다. 이를 이용하여 웹 애플리케이션에서 데이터를 저장하고 유지할 수 있습니다. Local Storage는 key-value 쌍으로 데이터를 저장하며, 자바스크립트를 통해 데이터를 관리할 수 있습니다.

쇼핑 카트 구현하기

쇼핑 카트를 구현하기 위해선 아래의 단계를 따라야 합니다:

1. HTML 마크업 작성: 쇼핑 카트를 표시할 HTML 요소를 작성합니다. 이 예제에서는 간단한 리스트로 구현하겠습니다. ```html

2. 아이템 추가 기능 구현: 사용자가 아이템을 추가하면 해당 아이템을 Local Storage에 저장합니다.
```javascript
function addItemToCart(item) {
  // Local Storage에서 기존 카트 아이템 가져오기
  let cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
  // 새로운 아이템 추가
  cartItems.push(item);
  // Local Storage에 갱신된 카트 아이템 저장
  localStorage.setItem('cartItems', JSON.stringify(cartItems));
}

1. 카트 아이템 표시 기능 구현: 페이지가 로드될 때 Local Storage에서 저장된 카트 아이템을 가져와서 표시합니다.

   function displayCartItems() {
     // Local Storage에서 카트 아이템 가져오기
     let cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
     // 카트 아이템을 HTML 요소에 표시
     let cartElement = document.getElementById('cart-items');
     cartItems.forEach(item => {
    let listItem = document.createElement('li');
    listItem.textContent = item;
    cartElement.appendChild(listItem);
     });
   }
   

2. 호출하기: 위에서 작성한 함수를 호출하여 쇼핑 카트를 구현합니다. ```javascript // 카트에 아이템 추가 addItemToCart(‘사과’); addItemToCart(‘바나나’); addItemToCart(‘오렌지’);

// 카트 아이템 표시 displayCartItems(); ```

결론

이제 자바스크립트의 Local Storage를 이용하여 쇼핑 카트를 간단하게 구현하는 방법을 알아보았습니다. Local Storage를 활용하면 웹 애플리케이션에서 중요한 데이터를 보존하고 관리하는 데 유용하게 사용할 수 있습니다.

#javascript #localstorage #쇼핑카트