key, value 데이터를 저장할 수 있는 Local Storage 사용법

웹 서버에서 데이터를 저장하는 방법도 있지만 클라이언트 즉, 웹 브라우저에서 key값과 value 값 데이터를 저장할 수 있는 Local Storage 속성이 있다. 사용 용도는 임시 저장 기능, 장바구니, 서버에 저장할 필요가 없는 경우 등이다.

 

Local Storate 속성은 기본적으로 string(문자열)로 저장된다. 저장은 localStorage.setItem(key,value);로 저장할 수 있다. 또한, 불러오는 방법은 localStorage.getItem(key);로 불러올 수 있다. 예제를 통해 이해해보자.

 

const form = document.querySelector('.js-form'),
    input = form.querySelector('input'),
    helloText = document.querySelector('.js-text');

const USER_NAME = "currentUser",
    SHOWING = "showing";

function setItem(text){
    localStorage.setItem(USER_NAME, text);
}

function submit(event){
    event.preventDefault();
    const INPUT = input.value;
    inputText(INPUT);
    setItem(INPUT);
}

function askForm(){
    form.classList.add(SHOWING);
    form.addEventListener("submit", submit);
}

function inputText(text){
    form.classList.remove(SHOWING);
    helloText.classList.add(SHOWING);
    helloText.innerHTML = `Hello ${text}`;
}

function userName(){

    const currentUser = localStorage.getItem(USER_NAME);

    if(currentUser === null){
        askForm();
    }else{
        inputText(currentUser);
    }
}


function init(){

    userName();
}
init();

다음의 예제는 사용자가 이름을 입력하면 Local Stroage에 저장되면서 'Hello (사용자가 입력한 값)'을 불러오는 코드이다. localStorage.getItem에 값이 없으면 null값으로 출력된다.