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

 

 

---

 

 

 

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

 

 

1. 쿠키와 세션

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

 

https://judahhh.tistory.com/46

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

 

 

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 지원여부

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

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

 

 

 

 

 

 

---