[JS] 로컬스토리지(LocalStorage) / JSON

728x90

1. localStorage

2. localStorage와 JSON

1. 로컬스토리지 개념

localStorage란 크롬과 같은 웹 브라우저에 데이터를 저장할 수 있는 기능이다.

즉 웹 상에 우리의 데이터들을 저장하는 것이다. 💡

로컬스토리지를 사용하면 브라우저를 닫아도 저장되었던 데이터를 계속해서 유지할 수 있다.

보통은 사용자의 로그인정보나 설정 등을 저장하기 위해 사용하는데,

Key- Value 값의 형태로 데이터를 저장한다.

localStorage.setItem("키", "값");

키에는 내가 저장하고 싶은 DB 덤탱이에 이름을 정해주는 것이고,

각 값은 각각의 데이터 값을 의미한다.

크롬 브라우저에서 local Storage 값 확인하기

크롬 브라우저에서 localStorage를 확인하려면

크롬 개발자 도구에서 localStorage 값을 확인 할 수 있다.

1. 크롬 브라우저 해당 페이지에서 'F12' 키 눌러 개발자 도구를 연다.

2. 'Application' 탭 선택

3. Storage > localStorage 영역에서 확인하려는 도메인을 선택하고 해당 도메인의 localStorage 값을 확인 할 수 있다.

예를 들어,

웹 브라우저의 로컬스토리지를 활용하여

사용자가 로그인 정보를 입력해서 로그인을 성공했을때 해당 아이디를 로컬스토리지에 저장하고,

사용자가 다음에 동일한 페이지에 방문하면

아이디 정보를 불러와서 이전에 입력했던 정보를 그대로 띄워주도록 구현 하는 방식처럼 사용자의 정보를 저장할 수 있다.

간단하게 사용자 이름을 입력 받고, localStorage에 저장되는 것을 확인해보자 .

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Momentum App</title>
  </head>
  <body>
    <form id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="What is your name?"
      />
      <input type="submit" value="Log In" />
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="app.js"></script>
  </body>
</html>

간단하게 사용자의 이름을 입력받는 화면을 만들고, 입력을 해보자.

이름을 입력하고 콘솔창과 웹 화면을 확인해보면

입력한 이름이 로컬 스토리지에 저장된 것을 확인할 수 있다.

그럼 크롬 창을 닫고 다시 들어와보자.

크롬을 닫고 다시 열어 들어왔음에도 불구하고

방금 전에 입력한 이름을 브라우저가 담고 있는 것을 확인 할 수 있다.

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

//String만 저장하는 변수: 대문자로 쓰는 관습
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
  event.preventDefault();
  loginForm.classList.add(HIDDEN_CLASSNAME);

  const username = loginInput.value;
  localStorage.setItem(USERNAME_KEY,username);
  paintGreetings(username);
}

loginForm.addEventListener("submit", onLoginSubmit);

function paintGreetings(abc){
    
    greeting.innerText = `Hello ${abc}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

console.log(savedUsername);

//localstorage에 유저 정보가 없다면, form의 submit을 기다림.
if(savedUsername === null){
    //show the form
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);
    
}
else{ //localstrage에 유저정보가 있다면, 유저정보를 받아 인자로 넣어줌.('savedUsername')
    //show the greetings
    paintGreetings(savedUsername);
}

흐름 이해를 위에 가져온 자바스크립트 코드다.

위는 브라우저를 껐다가 다시 들어와도 localStorage로부터 입력했던 이름을 가져오도록 동작하는 코드다.

1) paintGreetings(username); 일 경우

상수 username의 loginInput.value가 abc 으로 받아짐.

2) paintGreetings(savedUsername);일 경우

localStorage에서 꺼내오는 상수 USERNAME_KEY에 대응하는 키 username의 입력된 이름 value가 abc 으로 받아짐.

이를 통해 재방문 시 localStorage에 데이터의 유무에 따라 화면에 input창만 띄워주거나 ,

데이터가 존재하는 경우 해당 이름과 함께 Hello라는 인사와 이름을 화면에 띄워주게 되는 것이다.

2. localStorage와 JSON

1) localStorage로 저장하기

: Object 타입 → String 타입 변환

자바스크립트에서 localStorage.setItem()을 사용할때, localStorage는 JS의 Object를 저장할 수 없다.

즉, Object 타입을 String 타입으로 변환해서 localStorage에 저장해야한다.

Object를 String으로 변환하지 않는 경우, value 값에 [object Object], [object Object] 라는 값이 들어간다.

변환은 JSON.stringify()로 한다.

function savePlease() {
  localStorage.setItem(ITEMSAVED_LS, JSON.stringify(itemSaved))
}

2) localStorage에서 자바스크립트로 불러오기

: 원래 객체로 변환

: JSON.parse();

localStorage에서 JS로 데이터를 불러올 때에는 JSON.parse(localstorage key) 를 통해 변환해주어야 한다.

const savedToDos = localStorage.getItem(TODOS_KEY);


if(savedToDos !== null){

    //string을 다시 array로 꺼내기 위해 parse
    const parsedToDos = JSON.parse(savedToDos);
   
    //item 개수대로 아래 함수를 호출
    //forEach() : 받아온 array를 for문 없이 item 하나씩 function에 넣어줌!
    parsedToDos.forEach((item) => console.log("This is the turn of "+ item ));
    //parsedToDos.forEach(sayHello);

   
    toDos = parsedToDos;

    //이전에 저장해뒀던 배열을 불러와 출력함.
    parsedToDos.forEach(paintToDo);
}

만약, localstorage value를 object로 변환하지 않고 JS로 사용한다면,

값은 출력되지만 forEach문에서 오류가 발생한다.

왜냐하면 코드 내의 변수가 object 타입이 아닌, string타입이기 때문이다.

그리고 forEach문은 Array object에서만 사용가능한 메서드라는 이유도 있다.

💡

정리하면,

값에 여러개의 데이터를 넣고 싶을때?

-> 배열 형식으로 넣으면 된다.

배열형식은 string 형식으로 바꿔줘야 넣을 수 있다. JSON.stringify();

그럼 "["a","b","c"]" 형식으로 들어간다.

그러나 이러면 배열 형식을 사용할 수 없다.

따라서 JSON.parse()를 사용한다.

그럼 ["a","b","c"] 의 배열 모습이 된다.

이러한 배열 형식에서 특정 값을 찾기위해 사용하는 것이 바로 'id'값 이다.

배열에 id 값을 정해주기 위해서 다시 객체(Object)로 바꿔준다.

그럼 {text:"a", id=" " } 과 같은 각각의 id가 부여된 형태로 바뀌는 것이다.

이렇게 id를 만들어줄 때 자동으로 중복되지 않도록 만들어줘야하는데,

이때 유용한게 Date.now(); 이다.

*Date.now()는 기준이 되는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초를 반환한다.

즉, 내 예상과 달리 현재의 시간을 담는 것이 아니라

특정 시점으로부터 경과된 시간을 담기 때문에 매번 담는 값은 같은 수가 없고 고유한 값이 되는 것이다.

따라서 key값은 중복될 일이 없어진다.

이 id값을 html내의 id값과 동일시 해주고,

해당 id값을 선택해서 그 해당 데이터를 삭제하는 식으로 특정 값들을 쉽게 관리할 수 있다.

✅ 요약

1. localStorage란?

웹 브라우저에 데이터를 저장하는 기능으로, 브라우저를 닫아도 데이터가 유지됨.
주로 사용자 로그인 정보나 설정 값을 저장하는 데 사용됨.
localStorage.setItem(key, value)로 저장하고, localStorage.getItem(key)로 불러옴.

2. localStorage와 JSON 변환

1) localStorage에 객체 저장

localStorage는 문자열만 저장 가능
객체(Object)를 저장하려면 JSON.stringify() 사용
변환하지 않으면 [object Object]가 저장됨

2) localStorage에서 데이터 불러오기

저장된 문자열을 다시 객체로 변환하려면 JSON.parse() 사용
변환하지 않으면 단순 문자열로 인식됨

3) localStorage에서 배열 활용

여러 개의 값을 저장하려면 배열(Array) 형태로 저장
배열을 JSON.stringify()로 변환 후 저장
불러올 때 JSON.parse()로 다시 배열로 변환

3. 고유한 ID 관리 (Date.now())

데이터마다 고유 ID 부여 시 Date.now() 활용
Date.now()는 1970년 1월 1일부터의 경과 시간을 밀리초 단위로 반환
중복되지 않는 ID 생성 가능

*참고 및 출처

https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage

728x90

'💻 > Javascript' 카테고리의 다른 글

[JS] 자바스크립트 배열 Json타입 변환, ajax를 통해 controller에 넘기기 (0)	2025.01.05
[JS] 자바스크립트 문자열 공백 제거하기 - trim() , replace() (0)	2025.01.04
[JS] querySelector(), querySelectorAll() (0)	2024.08.11
[JS] 속성 선택하기 - .value / .innerHTML / .textContent 비교 (2)	2024.08.06
[JS] 자바스크립트 연산자 우선순위 (0)	2024.01.09

Soony's House

[JS] 로컬스토리지(LocalStorage) / JSON - Object 타입 변환

1. 로컬스토리지 개념

2. localStorage와 JSON

✅ 요약

1. localStorage란?

2. localStorage와 JSON 변환

3. 고유한 ID 관리 (Date.now())

'💻 > Javascript' 카테고리의 다른 글

티스토리툴바

[JS] 로컬스토리지(LocalStorage) / JSON - Object 타입 변환

1. 로컬스토리지 개념

2. localStorage와 JSON

✅ 요약

1. localStorage란?

2. localStorage와 JSON 변환

3. 고유한 ID 관리 (Date.now())

'💻 > Javascript' 카테고리의 다른 글

관련글

티스토리툴바