● 웹 브라우저
- 사용자의 컴퓨터에 웹사이트 사용 정보들을 저장하고 필요할 때마다 그 정보들 조회
=> 사용자 개인화 가능(= 사용자별로 저장 가능)
=> 속도 및 사용자 경험 개선
- Ex) 자동 로그인 기능, 로그인 없이 장바구니 상품 유지
● 로컬 스토리지
- Client Side Storage 방식 (= 사용자 측에 저장)
=> 데이터 저장을 사용자 컴퓨터에 하겠다는 의미
=> 내 컴퓨터 브라우저에만 한정적으로 적용
- 세션 스토리지에 저장된 데이터 : 페이지 닫을 때 사라짐
vs 로컬 스토리지에 저장된 데이터 : 새로고침 및 브라우저 종료 시에도 내 컴퓨터 동일 브라우저 내에는 데이터가 영구적으로 유지
- 인터넷 사용 기록 삭제하는 등의 방법으로 데이터 삭제 가능
- key, value 형태로 문자열 타입의 데이터 저장(key, value 모두 한글 가능)
Ex) localStorage.setItem() : 저장하기
localStorage.getItem() : 불러오기
localStorage.removeItem() : 삭제하기
localStorage.clear() : 모두 삭제하기
localStorage.length : 키/값 쌍의 개수
● 개발자 도구(F12)에서 로컬 스토리지 확인
- 개발자 도구 > 애플리케이션 > 저장용량 > 로컬 스토리지 > 해당 페이지 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>로컬 스토리지 테스트 페이지</p>
<script>
localStorage.setItem("name-en", "JANG WONYEONG");
localStorage.setItem("name-ko", "장원영");
localStorage.setItem("age", "2004-08-31");
</script>
</body>
</html>
● 개발자 도구 콘솔에서 직접 제어
- group이라는 key 추가
- key가 age인 데이터의 value 수정(2004-08-31 → 2004/08/31)
● key 또는 value 검색
참고
- 제주코딩스베이스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 로컬스토리지
https://www.youtube.com/watch?v=A4ESksGBPh4&list=PLkfUwwo13dlUJCAGcBOynazaBVgvvj4ba&index=16 - 가가가 - [Javascript] localStorage와 sessionStorage
https://gaagaagaa.tistory.com/entry/Javascript-localStorage%EC%99%80-sessionStorage
'Programming > Chrome' 카테고리의 다른 글
| [Chrome] 개발자 도구 - 콘솔 사용 시 주의사항(let, const 선언) (0) | 2023.12.10 |
|---|---|
| [Chrome] 개발자 도구 - 콘솔 사용법 (2) | 2023.12.03 |
| [Chrome] 개발자 도구 - 화면 캡처 (0) | 2023.11.28 |
| [Chrome] 개발자 도구 - 요소 상태 및 Class 활용 (0) | 2023.11.28 |
| [Chrome] 개발자 도구 - 명도대비율 확인 (2) | 2023.11.24 |
댓글