반응형
localStorage 사용법 및 예제
* 본 포스팅은 여러 참고 자료와 강의 수강 후 개인적인 복습을 위해 정리하였습니다.
참고 링크:
참고 강의:
1. 노마드코더: 초보자를 위한 바닐라자바스크립트 강의
포스팅 요약
4. 브라우저에서 localStorage 데이터 보는법
1. localStorage로 만든 예제 결과
1) input 태그에 닉네임 입력
2) 새로고침 혹은 페이지를 나갔다가 들어와도 아래 이미지와 같이 데이터가 남아있음.
3) Remove 버튼 클릭시, 데이터가 삭제되며 input태그가 다시 나타남.
2. localStorage란?
> 간단한 데이터를 브라우저에 저장하고 싶을때 localStorage를 사용합니다.
> 데이터를 브라우저에 영구적으로 남아있게 해줍니다.
> 5MB데이터 저장 가능
3. localStorage사용법
1) key와 value저장
localStorage.setItem(key, value);
2) key로 value 불러오기
localStorage.getItem(key);
3) LocalStorage에 있는 모든 데이터 삭제
localStorage.clear();
4) 원하는 값 삭제
localStorage.removeItem(key);4. 브라우저에서 localStorage 데이터 보는법
1) 마우스 오른쪽 버튼 > 검사
2) application > Storage > Local Storage > http://아이피주소 : 포트번호
(아래 이미지 빨간 박스 참고하세요!)
5. localStorage 예제 코드
<index.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vanilla JavaScript</title>
</head>
<body>
<!-- 닉네임 입력 태그 -->
<form class="js-form">
<input type="text" placeholder="Your NickName"/>
</form>
<!-- 닉네임 입력 후 나올 텍스트 -->
<h1 class="js-greeting"></h1>
<!-- 닉네임 입력 후 데이터를 지우고 싶을 시 사용하는 버튼 -->
<button>Remove</button>
<script src="./localStorage.js" defer></script>
</body>
</html>
<localStorage.js>
const form = document.querySelector(".js-form"),
input = form.querySelector("input"),
greeting = document.querySelector(".js-greeting"),
button = document.querySelector("button");
//저장할 데이터의 key값
const LOCAL_DATA = "nickName";
//input태그에 이름 입력 후 input태그를 감추고,
//텍스트가 나타나게 해주는 함수
function hiddenAndGreeting(name) {
greeting.style.display = "block";
form.style.display = "none";
button.style.display = "block";
button.addEventListener("click", onClick);
greeting.innerText = `Hi! ${name}`;
}
//버튼 클릭 시, 데이터 삭제 이벤트 발생
function onClick() {
localStorage.removeItem(LOCAL_DATA);
console.log("hi");
loaded();
}
//input태그에 입력 시, lacalStorage의 value값으로 저장
function onSubmit(e) {
e.preventDefault();
localStorage.setItem(LOCAL_DATA, input.value);
hiddenAndGreeting(input.value);
input.value = "";
}
//input태그 보이게 설정, 인사 텍스트와 버튼은 숨김.
//form에 submit 이벤트 설정
function askForNickName() {
form.style.display = "block";
greeting.style.display = "none";
button.style.display = "none";
form.addEventListener("submit", onSubmit); //form에 submit이벤트 추가
}
// 브라우저의 localStorage에 데이터가 있을때와 없을때
//구분하여 실행 시켜줄 함수.
function loaded() {
const data = localStorage.getItem(LOCAL_DATA);
if (data === null) { // 데이터가 없을 시
askForNickName();
} else {//데이터가 이미 있을 시
hiddenAndGreeting(data);
}
}
//처음 실행할 init함수
function init() {
loaded();
}
init();
반응형
'웹 > HTML-CSS-자바스크립트' 카테고리의 다른 글
| css, js 파일 HTML에 적용하기 (상세설명 + css 사용법 간략 설명) (4) | 2023.03.12 |
|---|---|
| CSS로 카드뒤집기 효과 만들기 - (사파리/크롬에서 사용할 수 있게 만들기) (0) | 2021.09.27 |
| scss에서 미디어 쿼리 다루기/ scss 미디어 쿼리 깔끔하게 사용하기 (1) | 2021.08.15 |
| [2021.08]자바스크립트에 미디어쿼리 사용하기+자동 새로고침 (2) | 2021.08.09 |
| (웹) 자바스크립트로 무한 슬라이드 만들기 (매우간단/ 상세 설명) (40) | 2021.08.04 |
댓글