[JavaScript]로컬스토리지

브라우저의 저장공간 중 하나인 로컬스토리지(Local Storage)

개발자도구에서 Application 탭으로 들어가면 나온다.

Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능)

Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법더러움)

Cookies (유저 로그인정보 저장공간)

Cache Storage (html css js img 파일 저장해두는 공간)

 

Local Storage에는 문자, 숫자만 key : value 형태로 저장 할 수 있다. 총 용량은 5MB

 

Local Storage는 브라우저 재접속해도 영구적으로 남아있는데

Session Storage는 브라우저 끄면 초기화된다.

유저가 브라우저 청소하지 않는 이상 반영구적으로 데이터저장이 가능

 

사용 예 ) 쇼핑몰 사이트에서 장바구니.

---

데이터 추가

localStorage.setItem('이름','han');

---

데이터 찾기

      localStorage.getItem('이름');

 

---

데이터 삭제

localStorage.removeItem('이름');

localStorage.clear();//스토리지 비우기

---

Local Storage에 array, object를 저장하려면 이 친구가 강제로 문자로 바꿔서 저장함;; 이러면 배열이 깨짐;;

근데!! JSON으로 바꿔서 저장하면 이런 문제 해결.

 

배열이 깨지는 것을 막기 위하여!! 사용해보자.

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

      localStorage.setItem('num',newArr);

 

---

대신 뺄 때도 array/object 타입으로 변환해야한다. 왜냐? 원래 Local Storage는 문자, 숫자만 가능해서

기능도 문자랑 숫자 찾는것처럼만 작동을 함.

배열의 값들을 따로 찾을 수 없다는 소리!!

 

   localStorage.setItem('num',newArr);
      const 꺼낸거 = localStorage.getItem('num')
      console.log(꺼낸거[0]);

배열 : 꺼내줘요

---

해결방법

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

      localStorage.setItem('num',newArr);
      const 꺼낸거 = localStorage.getItem('num')
      console.log(JSON.parse(꺼낸거)[0]);

야호 인덱싱이 가능하다!

---

Local Storage 데이터 수정 방법

1. 자료 꺼냄

2. 꺼낸거 수정

3. 다시 넣음

 

수정하는 함수같은건 없다.

수정예제

$('.buy').click(function(e){
      let title = $(e.target).siblings('h5').text();
      // e.target.previousElemntSiblig.previousElemntSiblig 전전형제요소 가져오기

      if (localStorage.getItem('cart') != null) {
        //데이터 수정을 위해서 다시 꺼내기
        let 꺼낸거 = JSON.parse(localStorage.cart);
        꺼낸거.push(title); //배열 데이터 추가
        localStorage.setItem('cart', JSON.stringify(꺼낸거));
      } //꺼낸거 다시 넣기
      else {
        localStorage.setItem('cart', JSON.stringify([title]))
      //JSON으로 변환 -> Array 타입 손상 방지
      } 
    })

---

참고하면 좋은 블로그!!

https://hianna.tistory.com/697

[Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등)

코딩애플 강의를 듣고 작성하는 글입니다.