반응형
1. innerText vs innerHTML
단순히 text를 가져올때는 큰 차이가 없다.
<HTML>의 <Tag>를 가져올 때 차이가 발생한다.
innerText → Text만
innerHTML → Tag + Text
[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>Document</title>
</head>
<body>
<span class="span">Hello<span> world</span></span>
<script src="index.js"></script>
</body>
</html>
[index.js]
const span = document.querySelector(".span");
console.log(`span.innerText = ${span.innerText}`); //span.innerText = Hello world
console.log(`span.innerHTML = ${span.innerHTML}`); //span.innerHTML = Hello<span> world</span>
[출력 결과]
innerText는 불러온 Object에 Text 값만 나타낸다.
innerHTML은 불러온 Object에 <tag>까지 포함하여 나타낸다.
2. 호출 스케줄링(scheduling a call)
일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것이다.
- setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법 (한번)
- setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법 (반복)
3. localStorage
읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다.
저장한 데이터는 브라우저 세션 간에 공유됩니다.
localStorage는 sessionStorage와 비슷하지만, localStorage의 데이터는 만료되지 않고 sessionStorage의 데이터는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다릅니다
3.1 setItem
localStorage에 항목 추가
localStorage.setItem("country","Korea");3.2 getItem
위에서 추가한 항목 읽기
const country = localStorage.getItem("country");
console.log(country) // Korea3.3 removeItem
제거하기
localStorage.removeItem("country")3.4 clear
전체 제거하기
localStorage.clear();4. 참고자료
https://ko.javascript.info/settimeout-setinterval#tasks
setTimeout과 setInterval을 이용한 호출 스케줄링
ko.javascript.info
https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
Window.localStorage - Web API | MDN
localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다.
developer.mozilla.org
반응형