localStorage

브라우저 저장공간 => Local Storage / Session Storage

Local Storage / Session Storage 는 문자, 숫자만 key : value 형태로 저장가능

• 사용법

localStorage.setItem('이름', 'kim') //자료저장하는법 
localStorage.getItem('이름') //자료꺼내는법
localStorage.removeItem('이름') //자료삭제하는법

---

로컬스토리지에 array/object 저장하려면 !!!이거 개 중요함!!!

원래 문자 , 숫자만 저장 가능하다고 했는데 걍 강제로 바꾸는 방법이 있음

array/obj를 JSON으로 바꾸면 됨 쳐 외워야할듯

• 배열/오브젝트 형식 쳐 집어넣는 사용법

var arr = [1,2,3];
var newArr = JSON.stringify(arr);

localStorage.setItem('num', newArr)

1. JSON.stringify() 안에 array/object 집어넣으면 JSON으로 바꿔줌. 그럼 문자취급받음

2. 그걸 localStorage에 저장한거임 localStorage들어가보면 진짜 array형태로 있음 // [1,2,3]

• 배열/오브젝트 형식 쳐 빼는 방법

var arr = [1,2,3];
var newArr = JSON.stringify(arr);

localStorage.setItem('num', newArr); //여기까진 집어 쳐 넣는거고

//꺼내는건 여기
var 꺼낸거 = localStorage.getItem('num');
꺼낸거 = JSON.parse(꺼낸거);
console.log(꺼낸거);

JSON으로 저장했으니 꺼내도 JSON임;

그래서 꺼낸걸 다시 array/object로 바꾸고 싶으면

JSON.parse() 안에 넣어야됨;;;;;;; 귀찮은 과정 두 번이나 있는듯 쳐집어넣을떄/ 쳐 뺼떄

결론은

array/object -> JSON 변환하고 싶으면 JSON.stringify()

JSON -> array/object 변환하고 싶으면 JSON.parse()

---

응용문제

• 구매버튼 눌렀을때 누른 상품의 이름을 localStorage에 저장하는데 같은 상품 구매 누르면 상품 갯수도 올라가게 만들어봐라 [ {title : '상품명a', num : 2}, {title : '상품명b', num : 4} ... ] 이런식으로 저장돼야됨

빡대가리라 이해 못할까봐 첨부한 사진

html은 js로 만들어놨음

var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];  

products.forEach(function(a){
  (생략)
  <h5>${a.title}</h5>
  <p>가격 : ${a.price}</p>
  <button class="buy">구매</button>
});

뒤져도 모르겠어서 정답 따옴 분석 ㄱ ㄱ

        var cart = []; //일단 빈 배열로 둔거보니 나중에 .push로 추가할듯 
        $('.buy').on('click',function(e){ 
        var title1 = $(e.target).siblings('h5').text(); //sibling은 형제 요소 찾아주는건데 형제요소인 h5 값 가져온듯
        let proIndex = cart.findIndex(a =>  title1 == a.title) // 3개 버튼 다 처음 눌렀을때는-1 나옴 =>이유는? findIndex가 뭐냐면 콜백함수에서 만족하는게 없으면 -1 나오고 만족하면 
        //인덱스 번호 나옴 지금 title1은 뭘 의미하냐면 내가 누른 버튼의 상품명을 의미하니까 첫번째 버튼 눌렀으면 Blossom Dress일것임 
        //그럼 a.title은 먼디?  카트배열의a번째 객체의title을 묻는건데 지금 비어있잖슴 그럼 두 값이 다르니까 -1이 나오겠죠
        // 만약 내가 눌렀던 버튼 또 누르면 이 값음 index번호가 됨 => findIndex 가 두 값 비교해서 같으면 그 값이 몇번째에 위치하는지 알려주는거임
        //그래서 else문으로 이동한답니다
        if(proIndex == -1){ // 위에꺼보면 이거 이해할 수 있겠지? 처음누른 버튼은 이 식에 들어간다는겨
            cart.push({title : title1, count : 1}); // 빈 배열에 {title:내가누른버튼 상품 , count: 1 } 이렇게 들어감
        }else{ // 이건 처음누른게 아니라 한 번이상 누른거
            cart[proIndex].count++; //이게 뭔뜻이냐면 카트 배열안의 obj에 있는 count만 1 늘려준다는거
        }
        localStorage.setItem('cart', JSON.stringify(cart));//그리고 마지막으로 로컬스토리지로 보냄
        })