브라우저의 로컬 스토리지

셀라문·2022년 3월 31일
0

JS UI

목록 보기
12/15

브라우저 저장공간이 여러개 있는데

크롬 개발자도구의 Application 탭 들어가보면 구경가능합니다.

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

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

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

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

골라쓰면 되는데 우린 범용적으로 쓸 수 있는 Local Storage를 써봅시다.

Local Storage / Session Storage 는
문자, 숫자만 key : value 형태로 저장가능하고
5MB까지만 저장가능합니다.

Local Storage는 브라우저 재접속해도 영구적으로 남아있는데 Session Storage는 브라우저 끄면 날아갑니다.

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

로컬스토리지 사용법

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

이게 끝입니다. 수정하는 법은 없어서 꺼내서 수정하고 다시 저장하면 됩니다.

진짜로 저장 잘 되는지 개발자도구에서 테스트해봅시다.

  • 근데 문자나 숫자만 저장할 수 있습니다.
  • sessionStorage.어쩌구로 바꾸면 Session Storage에 저장가능

로컬스토리지에 array/object 저장하려면

array/object를 로컬스토리지에 저장하면 강제로 문자로 바꿔서 저장됩니다.
그래서 자료가 깨질 수 있습니다.

그래서 약간 편법같은건데 array/object를 JSON으로 바꾸면 문자취급을 받기 때문에 안전하게 로컬스토리지에 저장할 수 있습니다.
JSON은 그냥 따옴표친 array/object입니다.

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

localStorage.setItem('num', newArr)
  1. JSON.stringify() 안에 array/object 집어넣으면 JSON으로 바꿔줍니다. 그럼 문자취급받음

  2. 그걸 localStorage에 저장하라고 코드짰습니다.

그럼 깨지지 않게 저장가능합니다.

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에 저장하기

일단 카드레이아웃 생성하는 코드에 <button class="buy">구매</button> 추가 후
이 버튼 누르면 버튼 위에 있던 상품제목을 가져와서 array형식으로 저장해봅시다.

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

$('.buy').click(function(){
  var title = $(e.target).siblings('h5').text();
  console.log(title)
});

구매버튼에 이벤트리스너를 붙여봤습니다.
누르면 위에 있는 가격도 출력해보라고 코드짜봤습니다.

jQuery함수인 .siblings() 는 내 형제요소를 찾아줍니다. (형제요소는 나랑 나란히 배치된 html 태그들)

쌩자바스크립트는 e.target.previousElementSibling.previousElementSibling 이러면 나올듯요

$('.buy').click(function(){
  var title = $(e.target).siblings('h5').text();
  localStorage.setItem('cart', JSON.stringify([title]))
});

로컬스토리지에 저장까지 해봤습니다.

근데 문제는 구매버튼 누를 때 마다 array가 새로 생성만 되고 있고 추가는 안되는군요.

그건 "이미 뭐가 저장되어있으면 새로추가하지말고 있는거 수정해주세요" 라고 코드짜면 될듯요

$('.buy').click(function(){
  var title = $(e.target).siblings('h5').text();
  if (localStorage.getItem('cart') != null ){
    이미있던거 수정해주셈
  } else {
    localStorage.setItem('cart', JSON.stringify([title]))
  }
});

'cart' 항목이 없을 때 getItem() 을 사용하면 null이 출력되어서 저렇게 적어봤습니다.

Q. 뭐가 없으면 null이 나오는지 어떻게 알죠?
A. 생각해서 안나오는건 검색해보거나 실험해보면 됩니다.

localStorage에 있던걸 직접 수정하는 문법은 없다고 했습니다.

그래서 꺼내서 수정하고 다시 집어넣으면 됩니다.

$('.buy').click(function(){
  var title = $(e.target).siblings('h5').text();
  if (localStorage.getItem('cart') != null ){
    var 꺼낸거 = JSON.parse(localStorage.cart);
    꺼낸거.push(title);
    localStorage.setItem('cart', JSON.stringify(꺼낸거));
  } else {
    localStorage.setItem('cart', JSON.stringify([title]))
  }
});

꺼내고 상품명 뒤에 하나 추가하고 다시집어넣어달라고 코드짰습니다.

출처 : 코딩애플

profile
예비 개발자의 공부기록장

0개의 댓글