localstorage json 저장하는 방법

목차

  1. localstorage란?
  2. localstorage json 저장하는 방법
    1. localstorage json 저장 코드
    2. localstorage json 저장 주요 코드 설명

localstorage란?

쿠키와 localstorage는 사용자에 대한 정보를 저장하는 주된 방법으로 알려져 있습니다. 가령, 쇼핑몰에서 장바구니를 클릭하고 그 페이지에 들어가 보면 사용자가 선택한 상품이 있는 것처럼 말이죠.

쿠키값들

쿠키는 위 사진과 같이 key-value, 주소, 경로, 유효 기간 등이 표시되어 있습니다. 하지만 localstorage는 브라우저에서 쿠키를 사용하는 것보다 훨씬 직관적으로 key-value 데이터를 안전하게 저장할 수 있습니다.


localstorage json 저장하는 방법

배경이 없는 하트를 누르면 localstorage에 저장되고 배경이 있는 하트를 누르면 id 값과 localstorage에 있는 json과 비교하여 일치하면 삭제되는 코드입니다.


localstorage json 저장 코드

<i class="far fa-heart" id="1">
<i class="far fa-heart" id="2">
<i class="far fa-heart" id="3">
let far = document.querySelectorAll('i.far');

const KEY = 'key';

let obj = [];
const ARRAY = ['fas','far', 'fa-heart'];

let save = (value) =>{
    if(!localStorage.getItem(KEY)){
        localStorage.setItem(KEY,`[{"id": "${value}"}]`);
    }else{
        let arr = new Array();
        arr=JSON.parse(localStorage.getItem(KEY));
        arr.push({
            id:value,
        });
        localStorage.setItem(KEY,JSON.stringify(arr))
    }
}

let remove = (e,values) =>{
    let current = e.currentTarget;
    current.classList.remove(ARRAY[0]);
    current.classList.add(ARRAY[1]);
    let getItem = new Array();
    getItem = JSON.parse(localStorage.getItem('key'));

    for(let i=0;i<getItem.length;i++){
        for(keys in getItem[i]){
            if(values == getItem[i][keys]){
                getItem.splice(i,1);
            }
        }
    }
    localStorage.setItem('key', JSON.stringify(getItem));
}

let start = (e) =>{
    let current = e.currentTarget;
    let id = current.id;

    if(current.classList[1] === ARRAY[2] || current.classList[1] === ARRAY[1]){
        current.classList.add(ARRAY[0]);
        current.classList.remove(ARRAY[1]);
        save(id);
    }else{
        remove(e,id);
    }
}

let load = (getItem) =>{
    let ids= [];
    ids = JSON.parse(getItem);
    let farValue = new Array();

    for(let i=0;i<far.length;i++){
        farValue.push([far[i].id][0]);
    }
    if(ids !=null){
        for( let i=0; i<ids.length; i++){
            for(keys in ids[i]){
                for(let j=0; j<farValue.length; j++){
                    if(ids[i][keys] == farValue[j]){
                        far[j].classList.add(ARRAY[0])
                        far[j].classList.remove(ARRAY[1])
                    }
                }
            }
        }
    }
}

let init = () =>{
    let getItem = localStorage.getItem(KEY)
    load(getItem);
    for(let i=0;i<far.length;i++){
        far[i].addEventListener('click',start);
    }
}

init();

결과 보기


localstorage json 저장 주요 코드 설명

저장은 localstorage.setItem(KEY, VALUE); 의 코드를 적으면 됩니다. 불러오기 위해서는 localstorage.getItem(KEY); 의 코드를 적으면 됩니다.

const ARRAY = ['fas','far', 'fa-heart'];

let start = (e) =>{
    let current = e.currentTarget;
    let id = current.id;

    if(current.classList[1] === ARRAY[2] || current.classList[1] === ARRAY[1]){
        current.classList.add(ARRAY[0]);
        current.classList.remove(ARRAY[1]);
        save(id);
    }else{
        remove(e,id);
    }
}

배경 없는 하트(far)를 클릭하면 실행되는 start 함수입니다. event.target과 event.currentTarget은 차이점이 있습니다. 이 글을 통해 자세하게 알 수 있습니다. 간단하게 event.currentTarget은 이벤트가 걸려있는 위치를 반환합니다. 즉, this가 가리키는 것과 같습니다. 위 코드로 설명하자면, 클릭한 하트의 id 값이 있는 곳이 되겠죠?

클릭한 코드를 분석하여 배경 없는 하트는 있는 하트로 바꿔주고 localstorage 저장하는 함수를 실행합니다. 또는 배경 있는 하트는 배경 없는 하트로 바꾸고 localstorage를 삭제하는 함수를 실행합니다. 이때 id 값과 event 객체를 보냅니다.

let save = (value) =>{
    if(!localStorage.getItem(KEY)){
        localStorage.setItem(KEY,`[{"id": "${value}"}]`);
    }else{
        let arr = new Array();
        arr=JSON.parse(localStorage.getItem(KEY));
        arr.push({
            id:value,
        });
        localStorage.setItem(KEY,JSON.stringify(arr))
    }
}

save 함수는 localstorage json 저장하는 기능입니다. localstorage에 값이 없으면 저장하고 있으면 기존에 있던 값과 이번에 새로 클릭한 id 값을 저장합니다.

let load = (getItem) =>{
    let ids= [];
    ids = JSON.parse(getItem);
    let farValue = new Array();

    for(let i=0;i<far.length;i++){
        farValue.push([far[i].id][0]);
    }
    if(ids !=null){
        for( let i=0; i<ids.length; i++){
            for(keys in ids[i]){
                for(let j=0; j<farValue.length; j++){
                    if(ids[i][keys] == farValue[j]){
                        far[j].classList.add(ARRAY[0])
                        far[j].classList.remove(ARRAY[1])
                    }
                }
            }
        }
    }
}

load 함수는 처음 페이지에 들어가고 로딩이 끝날 때 실행되는 함수입니다. 배경이 없는 하트의 id 값을 전부 가지고 와서 farValue 배열에 저장합니다. 그리고 localstorage에 값이 있으면 keys로 순회합니다. 마지막으로 id 값과 localstorage의 값이 일치하면 배경 있는 하트로 변경합니다.

함께 읽으면 좋은 글

자바스크립트 이미지 바꾸기