Javascript 로컬스토리지 3

BooKi·2022년 2월 26일

JavaScript

Javascript

목록 보기

35/46

⭐Javascript 로컬스토리지 3

지난 강의에서 ,로 구분했을 때 생기는 문제점이 있었다

그를 해결하기 위해선 물론 사람들이 많이 사용하지 않는 ||와 같은 것으로

구분 하여도 되지만, 이미 널리쓰이고 있는 데이터 형식을 사용하는 것이 편하다

이후에 우리가 짠 코드를 다른사람이 볼 상황이 생겨도 훨씬 더 쉽게 이해할 것이다

그래서 많이 사용되는 데이터 형식중 하나인 JSON을 알아보자

📕JSON

JavaScript Object Notation -> JSON

Json 사용에는 몇가지 규정이 있다

키는 문자열만 사용할 수 있다
문자열은 반드시 큰따옴표로 만들어야 한다
데이터는 숫자, 문자열, 불만 저장할 수 있다
컨테이너 데이터는 객체, 배열만 사용할 수 있다
등

많은 것이 있지만 기본적으로 이정도만 알면 되고 사용하다가 에러가 발생하면

'이건 안되는구나'하고 경험하면서 배우면 좋을 것이다

지난번에 했던 color와 message를 JSON 형태로 바꾸어 보자

{
   "color": "red",
   "message": "안뇽"
}

📗활용

JSON은 데이터를 배열 또는 객체를 활용해서 굉장히 다양하게 표현할 수 있다

현재 인터넷에서 문자열을 통해 데이터를 전달하는 가장 대표적인 데이터 형식이다

이러한 형식이 많이 쓰이기 때문에 JSON형태의 문자열을 쉽게 만들고 활용할 수 있게

도와주는 라이브러리가 존재한다

Javascript 에서는 JSON 객체 라는 라이브러리가 있다

📘메소드

JSON 객체는 두개의 메소드를 가지고 있다

JSON.stringify() -> 자바스크립트 객체를 JSON 문자열로 변환
JSON.parse() -> JSON 문자열을 자바스크립트 객체로 변환

JSON.stringify() 예시

JSON.parse() 예시

그렇다면 어제 만들었던 예제를 JSON 객체로 저장하도록 변경해보자

📙예제

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    const load = () => {
      const data = localStorage.getItem('애플리케이션')
      if (data !== null){//split이 아니라 JSON을 이용해서 데이터 리턴
        return JSON.parse(data)
      } else {//값이 없을 때 기본값
        return{ 
          color: 'red',
          message: ''
        }
      }
    }
    const save = (data) => {//위의 객체를 받아서 setItem으로 저장 
      localStorage.setItem('애플리케이션', JSON.stringify(data))
    }

    document.addEventListener('DOMContentLoaded', () => {
      const p = document.querySelector('p')
      const input = document.querySelector('input')
      const button = document.querySelector('button')
      const select = document.querySelector('select')
      //초기 실행
      const data = load()
      p.textContent = `이전 실행의 마지막 값 : ${data.message}`
      input.value = data.message
    
      document.body.style.backgroundColor = data.color
      select.value = data.color

      //이벤트 연결
      button.addEventListener('click', () => {
        //데이터 지우기
        data.color = 'red'
        data.message = ''
        save(data)
        //입력 양식 초기화
        select = 'red'
        input.value = ''
      })
      input.addEventListener('keyup', () => {
        data.message = input.value
        save(data)
      })
      select.addEventListener('change', () => {
        const color = select.options[select.selectedIndex].value
        //입력 양식 반영
        document.body.style.backgroundColor = color
        //데이터 저장
        data.color = color
        save(data) 
      })
    })
  </script>
</head>
<body>
  <p></p>
  <button>지우기</button>
  <input type="text" name="" id="">
  <select name="" id="">
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </select>
</body>
</html>