클론코딩 3일차 (#3.0~#3.10)

 

 

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>

 

[출력 결과]

console.log

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) // Korea

 

3.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

 

반응형

티스토리툴바