나의 경우 todo앱을 리액트로 만드는 과정 중에 화면을 껐다 켜도 리스트가 저장되어있기를 원하는데, 이전에 노마드 클론 코딩 중 local storage를 사용했던 경험이 있었다.
서버를 만들어주고 데이터를 저장하는 것까지는 필요없을 것 같아 이번에도 local storage를 이용해보기로 하였다.
직접 필요해서 구현하는 만큼 local storage 와 session storage가 무엇인지 정리해본 뒤 사용하고자 한다.
Web Storage - local storage / session storage
저장해야할 데이터가 서버 단에 저장하지 않아도 되는 유실되도 무방할 데이터라면, 서버 단에 데이터를 저장하는 것은 낭비일 수 있다.
대신 클라이언트 단(브라우저)에서 데이터를 저장할 수 있다.
로컬스토리지와 세션스토리지의 매커니즘의 차이는 데이터가 어떤 범위 내에서 얼마나 오래 보존되느냐에 있다.
세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지지만 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않는다.
브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄웠을 때, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되고 각 탭이나 창이 닫힐 때 저장한 데이터도 함께 소멸한다. 반면에 로컬 스토리지의 경우에는 여러 탭이나 창 간에서 데이터가 서로 공유되며 탭이나 창을 닫아도 데이터는 브라우저에 그대로 남는다.
그러나 로컬 스토리지의 데이터 영속성은 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당한다.
다른 기기나 브라우저 간 데이터가 공유되고 영속되야 할때는 클라우드 플랫폼이나 데이터베이스 서버를 사용해야한다.
로컬 스토리지와 세션 스토리지의 공통점은 데이터를 브라우저 상에 저장한다는 것, 자바스크립트 API가 완전히 동일한 형태이다. ( localStorage 부분을 sessinStorage 로 대체하기만 하면 코드가 돌아감. )
window.localStorage
Syntax
const storage = window.localStorage;Value
현재 출처의 로컬 저장 공간에 접근할 수 있는 Storage 객체.
키와 값은 항상 각 문자에 2바이트를 할당하는 UTF-16 [DOMString](https://developer.mozilla.org/ko/docs/Web/API/DOMString)의 형태로 저장합니다. 객체와 마찬가지로 정수 키는 자동으로 문자열로 변환합니다.
Method
| Method | Description |
|---|---|
| setItem() | 로컬 스토리지에 key, value 를 추가한다. |
| getItem() | 키에 맞는 값을 찾는다. |
| removeItem() | 키에 맞는 값을 삭제한다. |
| clear() | 로컬 스토리지에 저장된 모든 내용을 삭제한다. |
Example
localStorage.setItem("key","value")
key와 value 값을 넣어 localStorage 생성할 때.
key와 value는 문자열로 넣어준다.
localStorage.setItem("name","Haesoo");
console.log(localStorage);
// storage {name: 'Haesoo', length: 1}
localStorage.getItem("key")
특정 key의 값을 가져올 때.
localStorage.getItem("name");
// 'Haesoo'localStorage.removeItem("key")
데이터를 삭제할 때.
localStorage.removeItem("name");
console.log(localStorage);
// localStorage {length: 0}localStorage.removeItem("key")
localStorage의 모든 내용을 삭제할 때.
localStorage.clear();
참고한 고마우신 분들의 글.
[자바스크립트] 웹 스토리지 (localStorage, sessionStorage) 사용법
JavaScript에서 Local Storage를 사용하는 방법.
