119일차 - 일주일 후기 & 로컬 스토리지

일주일후기

오늘 일주일 후기는 프로젝트 후기에서 전부 써버린 내용들이여서, 프로젝트 이후 이야기를 아주 짧게 작성하고 로컬 스토리지에 대해 작성하겠다.

프로젝트 중 부족한 부분들을 느껴서 편하게 휴식을 하고 싶었지만, 주말을 이용해서 공부를 했다.
우선 금요일은 커스텀 훅, 토요일은 커링에 대해서 공부했다.
새로운 것을 공부할때는 습득도 중요하지만 체득이 무척 중요하다는 것을 다시 한번 느꼈다.
커링은 저번에 수업을 듣다가 공부한 내용이고, 커스텀 훅은 배운내용은 아니고 전에 공부한 내용인데 막상 사용할 상황이 오니 제대로 사용하지 못해서 다시 공부를 했다.
다음 프로젝트때는 둘 다 제대로 사용할 계획이다.

로컬 스토리지

로컬스토리지 Key, Value 저장소이다.
가볍게 사용할 수 있는 대신 별다른 기능은 없다.
단순한 Key, Value 저장소 그 이상도 이하도 아니다.
Key와 Value는 String Type만 지원한다.

sessionStorage와 다른점은 페이지를 닫아도 데이터가 유지된다는 점이다.

• 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청시 서버로 전송되지 않는다.
  이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다.
• 또한 서버가 HTTP헤더를 통해 스토리지 객체를 조작할 수 없다.
  웹스토리 객체 조작은 모두 자바스크립트 내에서 수행된다.
• 그리고 웹 스토리지 객체는 도메인, 프로토콜, 포트로 정의되는 오리진에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근 할 수 없다.

로컬 스토리지에는 4가지 중요한 사용법이 있다.

1. 로컬스토리지에 저장

localStorage.setItem(key, velue);

이로써 localStorage에 항목 하나를 추가한 것이다.

2. 로컬스토리지에서 항목을 읽는 법은 다음과 같다.

localStorage.getItem(key);

3. 로컬스토리지는 페이지를 닫는다고 삭제되지 않기 때문에 아래와 같이 제거해 줘야 한다.

localStorage.removeItem(key);

4. 로컬스토리지에서 모든 항목을 제거하고 싶다면 아래와 같이 입력하면 된다.

localStorage.clear();

참고 자료:
Javascript.Info - localStorage와 seesionStorage
MDN - Window.localStorage