[JavaScript] LocalStorage

스토리지(Storage)

자바스크립트 개발을 하다보면 스토리지가 필요할 때가 있다. 스토리지에 대해 알아보자

 

HTML5에서 추가된 로컬 스톨지는 Window 객체의 하위 객체로 영구 저장인 로컬 스토리지와

브라우저가 실행 중에만 유효한 세션 스토리지라는 두가지 저장 방식을 제공한다.

 

 

스토리지 종류 

구분	유호기간
localStorage	없음(영구적)
sessionStorage	브라우저 탭이 열려있는 동안만 유지됨(종료시 삭제)

 

 

key와 value

 

로컬 스토리지의 저장은 키와 값의 형태로 이루어진다. 키는 저정된 값을 식별하고 가져오는데 사용되고 원하는 만큼 로컬스토리지에 키를 저장 할 수 있다. 반대로 키를 가져올 때는 조회하려는 키 값으로 요청한다. 할당된 키의 저장되는 값은 숫자, 문자열, 객체(JSON)나 배열 같은 형태로 저장 할 수 있다.

 

 

데이터 저장 및 조회하기 

데이터를 저장하고 조회하기 위해 사용되는 메서드와 속성을 정리해 보고 예시를 살펴보자.

이름	구분	쿠키
setItem(key, value	메서드	해당 키 값으로 데이터를 저장한다.
getItem(key)	메서드	해당 키 값의 이름을 가진 데이터를 가져온다 .
reoveItem(key)	메서드	해당 키 값의 이름을 가진 데이터를 삭제한다.
key(index)	메서드	해당 인덱스 값을 가진 키의 이름을 가져온다.
clear()	메서드	모든 데이터를 삭제한다.
length	속성	저장된 데이터 수를 가져온다.

데이터 저장 및 조회 

// 저장
localStorage.setItem('name', 'jess2');

// 조회
var getValue = localStorage.getItem('name');
console.log(getValue); // jess2

로컬 스토리지에 name이라는 키 값으로 jess2라는 값을 저장한 다음 저장한 키 값으로 데이터를 조회한다.

 

크롬 개발자 도구에서 Application탭을 클릭하면 Storage > Local Storage에 저장한 데이터의 키와 값을 확인할 수 있다. 데이터 삭제도 다음과 같이 removeItem()메서드로 간단하게 처리할 수 있다.

 

localStorage.removeItem('name');

로컬 스토리지에 name이라는 키 값으로 jess2라는 값을 저장한 다음 저장한 키 값으로 데이터를 조회한다.

 

 

const form = document.querySelector(".form__js"), // form 가져오기
  input = form.querySelector("input"), //input 가져오기
  greeting = document.querySelector(".greeting__js"); //h2 가져오기

const user_localStorage = "currentUser"; // 유저
const showing_className = "showing"; //showing 클래스 이름

function saveName(text) {
  // handleSubmit에소 보낸 정보를 인자로 받는다
  localStorage.setItem(user_localStorage, text); // 그 인자를 localStorage에 저장한다
}
function hadleSubmit(event) {
  // 이벤트를 인자로 받는다
  event.preventDefault(); // 이벤트 방지
  const currentValue = input.value; // forn안에 입렫된 값을 저장.
  paintGreeting(currentUser); // 그 값을 paintGreetion 함수에 보내준다
  saveName(currentValue); // from에 입력된 값을 saveName에 인자로 보낸다
}

function askForName() {
  // 유저가 업을 떄 이 함수가 실행됨
  form.classList.add(showing_className); // form에 showing 클래스를 줘서 form이 보이게 한다
  form.addEventListener("submit", hadleSubmit); // 그 form에 이름을 적으면 이벤트 발생하고 handle함수를 실행
}

function paintGreeting(text) {
  //유저를 인자로 받아온다.
  form.classList.remove(showing_className); // form에 showing 클래스르 지운다
  greeting.classList.add(showing_className); // greetion에 showing 클래스를 생성한다

  const date = new Date(); // 시간 객체 생성
  const hours = date.getHours(); // 시간안에 현재 시간을 저장한다.

  if (hours >= 6 && hours < 12) {
    // 시간이 6시에서 12사이면 goodMoning
    greeting.innerText = `Good Moning ${text}`;
  } else if (hours >= 12 && hours < 18) {
    //시간이 12시에서 6시 사이면 Good Afternoon
    greeting.innerText = `Good Afternoon ${text}`;
  } else if (hours >= 18 && hours < 24) {
    // 시간이 6부터 12시면 Good Evening
    greeting.innerText = `Good evening ${text}`;
  } else {
    // 셋 다 아니면 Good day
    greeting.innerText = `Good Day ${text}`;
  }
}

function loadName() {
  // 메인함수 시작
  const currentUser = localStorage.getItem(user_localStorage); // 유저를 가져온다

  if (currentUser == null) {
    // 유저가 있지 않다면 아래 함수를 실행
    askForName();
  } else {
    //유저가 존재한다면 아래 함수를 실행
    paintGreeting(currentUser);
  }
}

function init() {
  // 함수 실행
  loadName(); // init함수가 실행되면 loadName함수가 시작된다
}
init(); // init 함수 시작

 

로컬스토리지(LocalStorage)를 이용하여 user__loclaStorage에 key값을 입력하고  input창에 이름을 입력하여 입력된 이름을 value값에 저장한 뒤 화면에 그 값을 영구적을 출력하는 함수이다 

또 중간에 시간을 불러오는 date를 이용해 시간마다 다르게 인사를 하는 조건을 추가해줬다