반응형
judahhh
좋게 생각하면 좋게 흘러간다!
judahhh
전체 방문자
오늘
어제
  • 분류 전체보기 (90)
    • git (2)
    • Algorithm (39)
    • Computer Science (8)
    • TIL (8)
    • FrontEnd (3)
      • React (8)
      • Typescript (0)
      • Javascript (13)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 티스토리챌린지
  • branch 조회
  • 프론트엔드 개발자
  • 이직
  • branch 생성
  • git branch 명령어
  • branch 이동
  • 주니어 개발자
  • git branch
  • 오블완
  • 자바스크립트 배열 함수
  • 자바스크립트 배열 메소드
  • branch 삭제
  • 자바스크립트

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
judahhh

좋게 생각하면 좋게 흘러간다!

[TIL] 데브코스 TIL - 쿠키와 세션, 웹스토리지, IndexedDB
TIL

[TIL] 데브코스 TIL - 쿠키와 세션, 웹스토리지, IndexedDB

2023. 6. 6. 00:56
728x90

 

 


 

 

 

하루하루 공부한 모든 내용을 블로그에 정리하긴 힘들겠지만 하루에 하나씩은 정리해서 공유해보도록 노력하겠습니다!

 

 

1. 쿠키와 세션

쿠키와 세션에 대해서는 내가 예전에 정리해놓은 글이 있어 따로 다시 정리하지는 않고 내가 쓴 글을 다시 보며 복습하는 계기가 되었다!!!

 

https://judahhh.tistory.com/46

 

[Web] 쿠키와 세션의 차이점, 인증과 인가, 세션 기반 인증 방식

쿠키와 세션의 차이점을 알아보기 전에 먼저 쿠키와 세션이 무엇인지부터 알아보자(나한테 하는 말) 쿠키와 세션의 사용 이유, 배경 쿠키와 세션을 사용하는 이유는 서버와 클라이언트의 통신

judahhh.tistory.com

 

 

2. 웹 스토리지 (Web Storage)

 

웹 스토리지는 두 가지 저장소를 제공한다.

개발자 도구 메뉴에 Application 탭을 누르면 쿠키 정보와 함께 스토리지 정보를 확인할 수 있다.

개발자 도구 안 Application 탭

 

 

아래와 같이 key, value 쌍으로 저장된다

웹스토리지 저장 예시

 

 

2.1) localStorage

 

- local에 도메인(사이트) 별로 지속되는 저장소

- 저장한 데이터를 명시적으로(개발자가 직접) 지우지 않는 이상 영구적으로 보관이 가능하다. 

- 시간제한이 없고 브라우저를 종료해도 죽지 않는다.

 

localStorage 사용 예시)

localStorage.setItem("jwt_accessToken", "토큰blahblah")
localStorage.getItem("jwt_accessToken")  // "토큰blahblah"

 

 

2.2) sessionStorage

 

-세션(브라우저, 탭)이 종료될 때까지 지속되는 저장소

- localStorage와 비슷하게 사용되지만 sessionStorage는 브라우저를 종료하면 데이터는 삭제된다!

 

sessionStorage 사용 예시)

 

기본적인 문법은 localStorage와 크게 다르지 않다.

sessionStorage.setItem("domain", "naver.com"); // domain이라는 키(key) 값을 사용하여 해당 텍스트(value)를 저장함
sessionStorage.getItem("domain"); // naver.com

 

 

localStorage와 sessionStorage의 차이점 : 데이터 소멸타이밍

 

 

3. IndexedDB

프론트엔드 개발을 하다보니 서버 없이 데이터를 영구저장 할 수 있는 방법을 찾아보다가

웹스토리지 외에 IndexedDB가 있다는 것을 알게 되었다!

클라이언트가 처리해야할 데이터 양은 앞으로도 계속 증가할 것이라고 생각된다.

 

강의를 들으며 멘토님이 한번 더 언급해주셔서 이번 기회에 글로 한번 더 정리하게 되었다 🤩

 

 

1) IndexedDB란?

IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API

 

데이터를 저장할 때 새로고침 시 데이터를 날아가는 문제를 해결하기 위해서는 브라우저가 제공하는 localStorage만 이용해도 충분할 것 같은데 IndexedDB를 왜 사용할까?

 

--> 많은 양의 데이터를 저장하기에 적합하다는 것이 localStorage 대비 가장 큰 특징으로 다가왔다.

 

 

 

2) IndexedDB의 특징

 

  1. 많은 양의 구조화된 데이터를 클라이언트에 저장할 수 있다.
    (Local Storage의 용량은 겨우 10MB 밖에 안된다고 한다.)

  2. Javascript 기반의 객체지향 데이터베이스이다.
    • 즉, Javascript가 인식할 수 있는 자료형과 객체를 저장할 수 있다!
      (Local Storage는 String 형태만 저장할 수 있다.)
  3. 트랜잭션을 사용하며 Key-Value 데이터베이스이다.
  4. IndexedDB는 비동기 API이다.

 

 

 

3) IndexedDB를 사용해보자!

 

1. Database 만들기 - open 함수로 데이터베이스를 연다.

// 지원여부확인
if (!window.indexedDB) {
  window.alert("browser doesn't support IndexedDB");
} else {
  let db;
  let request = window.indexedDB.open("myDataBase");

  request.onerror = function (event) {
    alert("failed");
  };
  request.onsuccess = function (event) {
    db = this.result;
  };
}

 

 

2. Object store를 생성한다.

 

-데이터를 담는 공간

- 여러 개의 key-value 쌍을 가진다. 

- Object Store 의 이름은 고유해야 한다.

- createObjectStore() 함수로 Object Store 생성

// 지원여부확인
if (!window.indexedDB) {
  window.alert("browser doesn't support IndexedDB");
} else {
  let db;
  let request = window.indexedDB.open("myDataBase");

  // 새로만들거나 버전이 높을때만 발생하는 이벤트
  // ObjectStore를 만들거나 수정할때 이 이벤트내에서 진행
  request.onupgradeneeded = function (event) {
    let db = event.target.result;
    // person 이라는 이름으로 ObjectStore를 만듬, key를 따로 만들지 않고 자동생성함.
    let objectStore = db.createObjectStore("person", { keyPath: "id" });
  };
  request.onerror = function (event) {
    alert("failed");
  };
  request.onsuccess = function (event) {
    db = this.result;
  };
}

 

 

 3. Transaction을 시작하고 데이터 생성, 조회, 수정, 삭제 등의 작업을 요청한다.

 

 

데이터 생성

function addData(people) {
  let request = window.indexedDB.open("myDataBase");

  request.onerror = function (event) {
    alert("Database error: " + event.target.errorCode);
  };
  request.onsuccess = function (event) {
    let db = this.result;
    // person ObjectStore에 readwrite(읽기,쓰기) 권한으로 Transaction 생성
    let transaction = db.transaction(["person"], "readwrite");

    // 완료 및 실패 이벤트 제어
    transaction.oncomplete = function (event) {
      console.log("done");
    };
    transaction.onerror = function (event) {
      console.log("fail");
    };

    let objectStore = transaction.objectStore("person");
    for (const person of people) {
      let request = objectStore.add(person);
      request.onsuccess = function (event) {
        console.log(event.target.result);
      };
    }
  };
}

let user = [
  {
    id: 1,
    name: "gildong",
    age: 33,
  },
  {
    id: 2,
    name: "judy",
    age: 25,
  },
  {
    id: 3,
    name: "tom",
    age: 28,
  },
];

addData(user);

 

 

 

 

데이터 조회

 

- db를 열고 transaction을 통해 ObjectStore에 접근하여 조회

- key를 통해 value를 get

 

function getData(key) {
  let request = window.indexedDB.open("myDataBase");

  request.onerror = function (event) {
    console.log(event.target.errorCode);
  };
  request.onsuccess = function (event) {
    let db = this.result;
    let transaction = db.transaction(["person"]);

    transaction.onerror = function (event) {
      console.log("fail");
    };
    transaction.oncomplete = function (event) {
      console.log(result);
      console.log("done");
    };

    let objectStore = transaction.objectStore("person");
    request = objectStore.get(key);
    request.onsuccess = function (event) {
      result = event.target.result;
    };
  };
}

getData(2); //{id: 2, name: 'judy', age: 25}

 

key값을 통해 불러온 data

 

 

 

 

데이터 수정

 

- db를 열고 transaction을 통해 ObjectStore에 접근하여 수정

- key를 통해 value를 update

 

function updateData(key, value) {
  let request = window.indexedDB.open("myDataBase");

  request.onerror = function (event) {
    console.log(event.target.errorCode);
  };
  request.onsuccess = function (event) {
    let db = this.result;
    let transaction = db.transaction(["person"], "readwrite");

    transaction.onerror = function (event) {
      console.log("fail");
    };
    transaction.onsuccess = function (event) {
      console.log("done");
    };

    let objectStore = transaction.objectStore("person");
    request = objectStore.get(key);
    request.onsuccess = function (event) {
      let data = event.target.result;
      data = value;

      let updateRequest = objectStore.put(data);
      updateRequest.onerror = function (event) {
        console.log("update error");
      };
      updateRequest.onsuccess = function (event) {
        console.log("update success");
      };
    };
  };
}

updateData(1, { id: 1, name: "haha", age: 30 });

 

잘 수정된 data

 

 

 

데이터 삭제

 

- db를 열고 transaction을 통해 ObjectStore에 접근하여 삭제

- key를 통해 delete

- clear() 함수를 통해 데이터 전체 삭제 가능

 

function deleteData(key) {
  let request = window.indexedDB.open("myDataBase");

  request.onerror = function (event) {
    alert(event.target.errorCode);
  };
  request.onsuccess = function (event) {
    let db = this.result;
    let transaction = db.transaction(["person"], "readwrite");

    transaction.onerror = function (event) {
      console.log("fail");
    };
    transaction.onsuccess = function (evnet) {
      console.log("done");
    };

    let objectStore = transaction.objectStore("person");
    let deleteReqeust = objectStore.delete(key);
    deleteReqeust.onsuccess = function (event) {
      console.log("deleted");
    };
  };
}
deleteData(3);

 

id가 3인 데이터가 잘 삭제됨

 

 

 

 

 

 

 

참고자료

 

MDN IndexedDB 공식문서

https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API

 

IndexedDB API - Web API | MDN

IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다. Web Storage는

developer.mozilla.org

 

브라우저 별 IndexedDB 지원여부

https://caniuse.com/?search=indexeddb 

 

"indexeddb" | Can I use... Support tables for HTML5, CSS3, etc

IndexedDB 2.0 Improvements to Indexed DB, including getAll(), renaming stores and indexes, and binary keys.

caniuse.com

 

 

 

 

 

 


 

728x90
    'TIL' 카테고리의 다른 글
    • [MIL] 프로그래머스 프론트엔드 데브코스 7월 회고록
    • [TIL] 데브코스 특강 - '함께 자라기' 김창준님 특강 후 요약 및 느낀 점
    • [TIL] 데브코스 TIL - 명령형과 선언형 프로그래밍, 선언형을 지향해야 하는 이유
    • [TIL] 데브코스 TIL - this, 전역오염방지, 변수선언방식, 클로저
    judahhh
    judahhh
    프론트엔드 개발자의 이모저모

    티스토리툴바