데브코스 1주차 스터디: 웹 스토리지

te-ing·2021년 8월 9일
2

🍪 웹 스토리지 탄생 배경

  • 쿠키의 단점
    • HTTP요청마다 포함되어 있어 서버에 부담이 가고, 웹이 느려지는 원인이 될 수 있음
    • 4KB라는 작은 용량
    • 만료기간이 존재
  • 웹스토리지
    • 서버가 없어도 로컬 스토리지에 저장 가능
    • 더 많은 용량 (5MB)

💾 웹 스토리지

웹스토리지는 로컬스토리지와 세션스토리지로 나뉜다.
Chrome 기준, 개발자 도구 ▶ 어플리케이션 ▶ 스토리지 에서 확인 가능

📚 로컬스토리지

  • 브라우저를 닫아도 데이터가 남음
  • 반영구적 데이터 저장(사용자가 지우지 않으면 안사라짐)
  • 도메인이 다르면 접근 불가
  • 아이디 저장, 검색 기록에 주로 사용

📖 세션스토리지

  • 새 창, 새 탭마다 개별적으로 데이터 저장
  • 브라우저를 닫는 순간 데이터 사라짐 (브라우저가 열려있는 한 최대한 유지)
  • 저장된 데이터를 절대 서버로 보내지 않음
  • 도메인이 다르면 접근 불가
  • 세션이 다르면 접근 불가
  • 입력 폼 정보, 비로그인 장바구니에 주로 사용

📋 웹스토리지 API 사용법

localStorage. || sessionStorage +

length // 읽기 전용 현재 Storage의 길이

key(int) // 해당 인덱스 위치에 있는 문자열 키 값을 리턴

getItem(key) // 해당 키 값에 해당하는 정보(문자열)을 리턴

setItem(key, value) // 해당 키 값에 대하여 해당 값을 설정

removeItem(key) // 해당 키 값의 값을 삭제

clear() // Storage 전체 내용을 삭제

🔎 IndexedDB

웹스토리지와 비교하여 알아보는 IndexedDB

📙 Webstorage

  • 5MB 저장용량
  • 동기(synchronous) 방식 동작
  • String 형태로만 저장 가능

📚 IndexedDB

  • 저장용량의 제한 없음
  • 비동기 방식 (Asynchronous)
  • 어떤 형태로든 저장 가능
  • Window객체, 웹워커, 서비스워커에서 접근 가능
  • low-level API로 사용하기가 어려움


참고사이트: kjwsx23.tistory, ktko.tistory, unikys.tistory, han41858.tistory, pks2974.medium

profile
프론트엔드 개발자

0개의 댓글