[코딩애플;JS] localStorage,JSON stringfy, parse(로컬스토리지에서 데이터 수정, 입력, 삭제)

1️⃣브라우저 저장공간과 localstorage

-local storage/Session storage : key:value 형태로 문자,숫자 데이터 저장가능

 localstorage: 웹브라우저에서 각 도메인에 대해 할당해 주는 저장공간.

5mb까지 저장 가능. 재접속시 반영구적으로 남아있음(브라우저 청소 시 사라짐)

 session storage: 브라우저 끄면 날아감.

-Indexed DB : 크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법이 어려움.

-Cookies: 유저 로그인 정보 저장 공간

-Cache Storage : html,css,js,img 파일 저장하는 공간

 

2️⃣로컬스토리지 사용법

:로컬스토리지 속성은 현재 도메인의 로컬 저장소에 쉽게 접근하게 해준다.

localStorage.setItem('이름', 'kim') //자료저장하는법

localStorage.getItem('이름') //자료꺼내는법

localStorage.removeItem('이름') //자료삭제하는법

localStorage.clear('이름') //모든데이터 삭제

 

//로컬스토리지 데이터이름은 중복될 수 없다.

 

3️⃣로컬스토리지 array/object 저장

배열과 객체를 로컬스토리지에 저장하면 강제로 문자로 바꿔서 저장됨.

그래서 JSON으로 변경하여 안전하게 로컬스트리지로 저장하고 가져올 수 있음.

 

-로컬스토리지에 넣을 때

var arr = [1,2,3];

var newArr = JSON.stringify(arr);

localStorage.setItem('num', newArr)

 

-로컬스토리지에서 가져올 때

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

꺼낸거 = JSON.parse(꺼낸거);

console.log(꺼낸거);

 

 

📒로컬스토리지에 값이 있을 경우는 새로 데이터 넣고, 기존 값이 있을 경우에는 수정해서 다시 넣기

    var card_btn = document.querySelectorAll('.buy');

    // localStorage.removeItem('cart');

   

    card_btn.forEach(function (el) {

      el.addEventListener('click', function () {

        var title1=el.parentElement.children[1].innerHTML;

       

        var title = localStorage.getItem('cart'); //우선 현재 localStorage 안에 있는 값 가져오기

   

        if (localStorage.getItem('cart') == null) {

          title = []; // 빈배열로 만들기

       

        } else {

          title = JSON.parse(title);

          //그대로 JSON을 parse로 다시 배열 형태로 만든다.

             

        }

          title.push(title1);

          localStorage.setItem('cart', JSON.stringify(title));

      })

     

    }

 

📒 중복된 상품명 확인해서 안들어가게하기

    card_btn.forEach(function (el) {

      el.addEventListener('click', function () {

        var title1=el.parentElement.children[1].innerHTML;

       

        var title = localStorage.getItem('cart'); //우선 현재 localStorage 안에 있는 값 가져오기

   

        if (localStorage.getItem('cart') == null) {

          title = []; // 빈배열로 만들기

       

        } else {

          title = JSON.parse(title);

          //그대로 JSON을 parse로 다시 배열 형태로 만든다.

          if(title.includes(title1)){//선택한 요소의 html이 title배열에 포함하는지 확인

            alert('중복된 상품이 있습니다');

            return false ;  //함수 중지

           

          }        

        }

          title.push(title1);

          localStorage.setItem('cart', JSON.stringify(title));

      })

     

    })