[자바스크립트] 브라우저 로컬 스토리지(localStorage)사용하기

브라우저에 데이터를 저장하는 방법을 알아보자.

localStorage.setItem('ㅇㅇ','kkk');
localStorage.setItem('name',[1,2,3]);//안됨
var arr=[1,2,3];
var newArr=JSON.stringify(arr);
localStorage.setItem('name',newArr);

var 꺼낸거=localStorage.getItem('name');

var newArr=JSON.parse(꺼낸거);
console.log(newArr[0]);

로컬스토리지는 key:value의 형태로 저장할 수 있다.

문자나 숫자만 넣을 수 있어서, Array, Object자료형은 저장을 할 수 없다.

 

이때는 JSON.stringify() 메소드를 이용해서 문자열의 형태로 변환한 후 

로컬스토리지에 저장하면 된다.

이렇게 저장해 둔 값을 꺼내 사용할 때는

JSON.parse()메소드를 이용해서 원래 자료형으로 변환한 후 사용해야 한다.

 

---

물품 구매버튼을 클릭하면, 로컬스토리지에 항목을 저장해서 

장바구니 페이지에 출력 해 보자.

 

var cart = [];
$('.buy').click(function (e) {
    if (localStorage.getItem('cart') != null) {
        cart = JSON.parse(localStorage.getItem('cart'));
    }
//    cart.push(e.target.previousElementSibling.previousElementSibling.textContent);
    cart.push($(e.target).siblings('h5').text());
    var J_cart = JSON.stringify(cart);
    localStorage.setItem('cart', J_cart);
});

우선 .buy 클래스가 붙어있는 구매하기 버튼을 클릭하는 이벤트리스너를 만들었다.

 

localStorage에 cart항목이 있는 경우에는

해당 항목을 가져와서 사용한다.(가져올 때는 JSON을 원래대로 변환해줘야한다)

cart에 현재 누른 물품($(e.target).siblings('h5').text()) 을 추가해주고

다시 JSON으로 변환한 후 스토리지에 저장하면 된다.

 

    <h4>장바구니</h4>

    <div id="cart">

    </div>

    <script>
        var cart = JSON.parse(localStorage.getItem('cart'));

        for (var i = 0; i < cart.length; i++) {
            $('#cart').append(`<p>${cart[i]}</p>`);
        }

    </script>

장바구니 페이지 출력도 간단하게

로컬스토리지에서 cart항목을 모두 가져와서

반복문을 이용하여 하나씩 출력했다.