TIL:) 웹 스토리지

😃 Today I Leaned

  • 팀 소개 웹 페이지 _ 발표
  • 웹 스토리지 (localStorage, sessionStorage)

팀 소개 웹 페이지 _ 발표 및 회고

한 주 동안 진행되었던 팀 소개 웹 페이지 제작 프로젝트가 마무리되었다!

오늘 발표와 피드백을 진행하고 회고를 작성하였다

회고를 작성하는 동안 이번주 팀원들과 회의하고 문제를 해결하였던 모습이 생각났고

flask를 이용한 서버와의 통신에 대해 자세히 배울 수 있었던 시간이었던 것 같다

 

다음 주부터는 새로운 팀원들과 Java 문법을 학습한다고 한다

아직 가야할 길이 멀지만 자신 있는 개발자로서 거듭날 수 있도록 앞으로 더욱 노력해야겠다!


웹 스토리지 (localStorage, sessionStorage)

참고 ) https://www.daleseo.com/js-web-storage/

 

다른 팀의 발표를 듣던 중 나와 다른 방식으로 팀원 별 상세페이지에 접속하는 것을 알게 되었다.

그 방식은 바로 localStorage였는데, 처음 들어보는 기술이라 공부해보려고 한다:)

 

웹 스토리지

- DB 서버나 클라우드 플랫폼에 데이터를 저장하지 않고

  클라이언트 상, 즉 브라우저 상에 데이터를 저장할 수 있는 기술

 

localStorage vs sessionStorage

- 차이점 : 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있음

- localStorage : 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않음

- sessionStorage : 웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐

 

오늘 중점적으로 알아볼 것은 localStorage입니다.

(sessionStorage를 사용할 때에는 localStorage를 sessionStorage로만 바꾸면 됨)

 

기본 API

- 기본적으로 키와 값으로 이루어진 데이터를 저장할 수 있음 (해시 테이블 자료 구조를 생각하면 됨)

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

- window.localStorage를 사용해야 하지만, window 객체 속성을 이용해 localStorage로 줄여서 사용 가능

- 오직 문자형(String) 데이터 타입만을 지원


⭐알게 된 점⭐

웹 스토리지

서버에 데이터를 저장하지 않고 브라우저 상에 데이터를 저장해 가지고 올 수 있는 방법이 있다.

그것은 바로 웹 스토리지이다.

localStorage와 sessionStorage가 있고

세션이 끝나더라도 데이터를 저장하려면 localStorage를 사용해야 한다.

웹 스토리지는 오직 문자형 데이터만 사용할 수 있으므로 사용 시 유의해야 한다.


🐰 END

일주일간 진행되었던 프로젝트가 마무리가 되었다!

모든 팀원들이 너무나 잘해주어 힘들지 않게 마무리할 수 있었던 것 같다

앞으로 남은 수업과 프로젝트가 많은데

지치지 않고 열심히 수행해 좋은 결과를 만들어내야겠다

파이팅😆

BELATED ARTICLES

more