Unit 11. 페이지 네이션 & 웹 스토리지

📣  페이지네이션

✔️ 페이지네이션 : 콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소

리스트가 많아 한 화면에 과한 스크롤이 발생할 때 유용하다.

(구현은 실습 부분에서 다룰 것)

📣  웹 스토리지 

✔️ 브라우저 상에 데이터를 저장할 수 있는 기술

✔️ 기본적으로 키와 값으로 이루어진 데이터를 저장한다.

✔️ 크롬 -> 개발자 도구 -> Application -> storage

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

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

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

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

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

 

✔️  오직 문자형 데이터 타입만 지원한다.

🚨 객체형 데이터를 저장할 경우 주의해야 한다.

localStorage.setItem('obj', {a: 1, b: 2})

localStorage.getItem('obj')
// "[object Object]"

✔️ 다른 타입의 데이터를 저장할 경우 문자형으로 반환하기 때문이다.

 

📌 해결 방법 : JSON 형태로 데이터를 읽고 쓰면 해결 

localStorage.setItem('json', JSON.stringify({a: 1, b: 2}))

JSON.parse(localStorage.getItem('json'))
// {a: 1, b: 2}

➕ JSON 데이터란?

✔️ JSON (JavaScript Object Notaion)

➰ JS 에서 객체를 만들 때 사용하는 표현식

➰ 서버와 데이터를 주고받는 하나의 형태

➰ JSON 파일은 하나의 문자 데이터

➰ JS 파일 내 어디에서도 사용할 수 있는 전역 객체

 

✔️ JSON.stringfy()

➰ JS파일 내에서 특정한 데이터를 json 형태로 문자 데이터화 시켜주는 메소드

➰ 쉽게 json화 시켜준다고 생각하면 된다.

 

✔️ JSON.parse()

➰ JS에서 활용할 수 있는 데이터로 변환 시켜주는 메소드

 

✔️ 로컬 스토리지에 저장된 데이터는 브라우저를 닫아도 사라지지 않기 때문에 직접 삭제해줘야 한다.

localStorage.length
// 5
localStorage.key(0)
// "email"
localStorage.removeItem('obj')
// undefined
localStorage.length
// 4
localStorage.clear()
// undefined
localStorage.length
// 0

 

 

1️⃣ 로컬 스토리지 (localStorage)

✔️ 웹 페이지의 세션이 끝나더라도 저장된 데이터가 지워지지 않는다. (데이터 영속성)

✔️ 여러 창이나 탭 간에 데이터가 서로 공유된다.

✔️ 동일한 컴퓨터에서 동일한 브라우저를 사용할 때만 해당한다.

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

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

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

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

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

 

2️⃣ 세션 스토리지 (sessionStorage)

✔️ 웹 페이지의 세션이 끝날 때 저장된 데이터가 지워진다.

✔️ 여러 창이나 탭을 열 경우 데이터가 서로 격리되어 저장된다.