Notice
Recent Posts
Link
«   2024/06   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
Tags more
Archives
관리 메뉴

공부기록용

Javascript 기초 12(classList, localStorage) 본문

📚강의록📚/유노코딩)Javascript

Javascript 기초 12(classList, localStorage)

과부하가즈아 2023. 5. 1. 17:40

Element.classList

웹 요소(Element)로부터 클래스 콜렉션을 반환하는 읽기 전용 속성이다. (태그를 통해 만들어진 요소에서 클래스의 목록만 뽑아내는 속성이 바로 이 classList)

 

반환된 클래스 콜렉션은 유용한 메소드를 다수 포함하고 있다.

 

▶내용실습◀

<!--HTML-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>자바스크립트 실습을 해보자</title>
  <style>
  </style>
</head>
<body>
  <h1 class="text">실험용 테스트</h1>
  <button id="add">add</button>
  <button id="remove">remove</button>
  <button id="toggle">toggle</button>

  <script src="script.js"></script>
</body>
</html>

// Javascript

// querySelector로 요소들 모두 선택
const h1 = document.querySelector('h1')
const addBtn = document.querySelector('#add')
const removeBtn = document.querySelector('#remove')
const toggleBtn = document.querySelector('#toggle')

console.log(h1.classList)

◆class 값이 제대로 작동되지 않았음 다시 볼 때, 다시 해보기◆

<!--HTML-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>자바스크립트 실습을 해보자</title>
  <style>
    .text{
      color: red;
    }
  </style>
</head>
<body>
  <h1>실험용 테스트</h1>
  <button id="add">add</button>
  <button id="remove">remove</button>
  <button id="toggle">toggle</button>

  <script src="script.js"></script>
</body>
</html>
// Javascript

// querySelector로 요소들 모두 선택
const h1 = document.querySelector('h1')
const addBtn = document.querySelector('#add')
const removeBtn = document.querySelector('#remove')
const toggleBtn = document.querySelector('#toggle')

// 각 버튼의 이름에 맞게 메소드를 호출

// add_주어진 문자열의 값(text)을 class로 추가한다.
addBtn.addEventListener('click', function(){
    h1.classList.add('text')
})

// remove_주어진 문자열의 값(text)을 삭제한다.
removeBtn.addEventListener('click', function(){
    h1.classList.remove('text')
})

// toggle_주어진 문자열의 값(text)을 없다면 class로 추가하고 있다면 삭제한다.
addBtn.addEventListener('click', function(){
    h1.classList.toggle('text')
})

(window.)localStorage

localStorage 속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 해준다. 로컬 저장소는 웹 브라우저에서 각 도메인에 대해 할당해주는 저장 공간으로, 여기에는 데이터를 영구적(브라우저를 껏다 켜거나 페이지를 새로고침해도 해당 페이지에 데이터가 남아 있도록 할 수 있다)으로 보관할 수가 있다. 데이터 보관시, 데이터의 이름(key)과 데이터의 실제 값(value)을 각각 지정하며, 이때 데이터 타입은 문자열 형태만 허용한다. 

 

localStorage로부터 데이터를 읽거나 쓸 때에는 메소드를 이용해 접근한다. (localStorage의 데이터 이름_key은 중복될 수 없다.)

 

 

▶내용실습◀

로컬 저장소의 위치

const myName = "유노"
console.log(myName)     // 이 정보들을 로컬저장소에

// 저장("데이터의 이름", 실제 저장할 데이터_유노) 
localStorage.setItem("myName", myName)

데이터 이름(key), 데이터 값(value) 이 영구적으로 저장되어 따로 파일에서 생성하지 않아도 된다.

 

즉,  따로 스크립트에 데이터의 이름과 값을 지정하지 않아도 데이터를 불러올 수 있다.

// getItem(웹 브라우저에서 가져오고 싶은 아이템의 이름)사용 
const myName = localStorage.getItem("myName")

alert(myName)

localStorage.setItem("cat", "고양이")
localStorage.setItem("dog", "강아지")
localStorage.setItem("myName", "도레미")  // 같은 데이터의 이름이 추가 된다면 새로 작성한 값으로 저장된다.

문자열로된 여러개의 데이터가 저장

localStorage.removeItem("dog")

dog의 데이터가 삭제됨

localStorage.clear()

모든 데이터가 삭제됨

 

 

출처 : https://www.youtube.com/@uknowcoding

'📚강의록📚 > 유노코딩)Javascript' 카테고리의 다른 글

Javascript 기초 13(form 관련 정리)  (0) 2023.06.28
Javascript 기초 11(타이머 관련 기능들)  (0) 2023.05.01
Javascript 기초 10(삼항 연산)  (0) 2023.04.27
Javascript 기초 09(value 속성)  (0) 2023.04.27
Javascript 기초 08(Event)  (0) 2023.04.27
'📚강의록📚/유노코딩)Javascript' Related Articles more
Comments