localStorage에 JSON을 쓰는 이유

Javascript

 

📌 localStorage

localStorage 객체 : 지역적으로 사용할 수 있는 저장소 객체
데이터 저장을 할 땐 일반적으로 세션이 큰 걸 활용하지만 간단하게 만들때는 localStorage도 ㄱㅊ

localStorage 객체의 메소드

getItem('키')	특정한 키로 값을 꺼낼때
setItem('키','값)	특정한 키로 특정한 값을 저장할 때
removeItem('키')	특정한 키로 어떤 값을 제거할 때
clear()	전체 제거

 

하나씩 가져오는 구조

document.addEventListener('DOMContentLoaded', () => {
    const p = document.querySelector('p')
    const button = document.querySelector('button')
    const input = document.querySelector('input')

    const key = localStorage.getItem('키')
    if (key !== null){
        // null 이 아닐때만
        p.textContent = `이전 실행 때 마지막 값 : ${key}`
        input.value = key
    }

    // 버튼 누를때마다
    button.addEventListener('click', () => {
        // 저장된 애들 제거
        localStorage.clear()
    })

    // input에 keyup 될때마다
    input.addEventListener('keyup', () => {
        // 입력 양식 내부의 값을 저장
        localStorage.setItem('키', input.value)
    })
}

input의 값을 '키'라는 key로 set하고

'키'로 get하여 하나씩 가져옴

버튼을 누르면 저장된 값 초기화 

 

localStoarge는 key 하나로 관리한다.

일반적으로 저장되어있는 key가 많아지면 getItem setItem 으로 관리하는게 너무 어려워진다.
그래서 하나로 통합

const load = () => {
    const data = localStorage.getItem('애플리케이션')

    // 데이터가 있으면
    if (data != null) {

        // split 하고
        const [color, message] = data.split(',')

        return {
            // 컬러는 컬러로, 메세지는 메세지로 리턴
            color : color,
            message : message
        }
        else {
            // 기본값은 설정
            return {
                color : 'red',
                message : ''
            }
        }
    }
}

const save = (data) => {
    localStorage.setItem('애플리케이션', `${data.color}, ${data.message}`)
}

 

템플릿리터럴 (` `) 로 key값인 애플리케이션 안에 컬러랑 메세지 꾸역꾸역 넣음
그렇게 한 문자열로 setItem 하고
getItem 할때는 그 사이사이 연결되어있는 것(,)을 split로 나누고 객체에 다시 담아서 꺼내는 것...

이렇게 데이터를 주고받으면 , 얘를 못쓰니까 불편함
잘 안쓰는 || 이런걸 써도 누군가에겐 문제가 생김
그래서 그냥 널리 쓰는 데이터 형식을 쓰는게 더 쉽고 다른 누군가도 이해하기 쉬움
그게 바로 JSON (JavaScript Object Notation)

 

 

📌 JSON 

이런식으로 씀

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

1. 객체로 감싸고
2. 키는 문자열만 사용가능
3. 문자열은 반드시 큰따옴표로!

 

JSON.stringify()	자바스크립트 객체 → JSON 문자열로 변환
JSON.parse()	JSON 문자열 → 자바스크립트 객체로 변환

 

이걸 활용하면 ...

 

const object = {
    color: "red",
    message: "안뇽!"
}

console.log( JSON.stringify(object) )
//--==>> {"color":"red","message":"안뇽!"}

const string = JSON.stringify(object)
const other = JSON.parse(string)
console.log(other.color)
//--==>> red

 

그래서 저장할때!
localStorage.setItem('애플리케이션', `${data.color},${data.message}`)

... 이렇게 악착같이 콤마로 구분해서 문자열로 만들고 저장할 필요 없이

 

localStorage.setItem('애플리케이션', JSON.stringify(data))
그냥 JSON 객체 활용

그리고 꺼낼때도

 

const data = localStorage.getItem('애플리케이션')
if (data !== null){
    const [color, message] = data.split(',')
    return {
        color: color,
        message: message
    }
}

 

이렇게 꺼낸걸 콤마로 나누고 악착같이 하나하나 키에 다시 넣을 필요 없이

 

const data = localStorage.getItem('애플리케이션')
if (data !== null){
    const [color, message] = data.split(',')
    return JSON.parse(data)
}

 

그냥 JSON 객체로 꺼냄