2024-05-10

JavaScript, 배열, HTML, localStorage를 사용하여 동적 웹 페이지 만들기

javascript arrays html

Javascript, Arrays, HTML을 이용한 localStorage에 배열 저장 방법

개요

웹 브라우저는 사용자 설정, 데이터 등을 저장할 수 있는 저장공간을 제공합니다. 이 중 localStorage는 브라우저 종료 후에도 유지되는 영구 저장공간입니다.

본 가이드에서는 Javascript, 배열, HTML을 활용하여 localStorage에 배열을 저장하고 불러오는 방법을 단계별로 설명합니다.

예제

다음은 "todo"라는 이름의 배열을 localStorage에 저장하고 불러오는 예제입니다.

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>localStorage 예제</title>
</head>
<body>
  <button onclick="saveArray()">저장</button>
  <button onclick="loadArray()">불러오기</button>
  <ul id="todoList"></ul>

  <script src="script.js"></script>
</body>
</html>

Javascript (script.js)

const todoList = ["HTML 공부하기", "CSS 공부하기", "Javascript 공부하기"];

function saveArray() {
  localStorage.setItem("todoList", JSON.stringify(todoList));
}

function loadArray() {
  const loadedArray = JSON.parse(localStorage.getItem("todoList"));
  if (loadedArray) {
    displayList(loadedArray);
  } else {
    console.log("localStorage에 저장된 배열이 없습니다.");
  }
}

function displayList(array) {
  const list = document.getElementById("todoList");
  list.innerHTML = "";

  array.forEach(item => {
    const listItem = document.createElement("li");
    listItem.textContent = item;
    list.appendChild(listItem);
  });
}

설명

  1. 배열 생성: todoList이라는 이름의 배열을 만들고 원하는 데이터를 추가합니다.
  2. 저장 함수: saveArray 함수는 JSON.stringify()를 사용하여 배열을 문자열 형식으로 변환하고 localStorage.setItem()을 사용하여 "todoList" 키 아래 저장합니다.
  3. 불러오기 함수: loadArray 함수는 localStorage.getItem()을 사용하여 "todoList" 키에 해당하는 값을 불러옵니다. JSON.parse()를 사용하여 문자열을 다시 배열 형식으로 변환합니다.
  4. 목록 표시 함수: displayList 함수는 불러온 배열을 사용하여 웹 페이지에 목록을 표시합니다.

참고사항

  • localStorage는 웹 브라우저마다 최대 저장 용량이 제한될 수 있습니다.
  • 민감한 정보는 localStorage에 저장하지 않는 것이 좋습니다.
  • 보다 안전한 데이터 저장 방식을 위해서는 IndexedDB 또는 Web Storage API를 사용하는 것을 고려하십시오.

주의

제공된 코드는 예시이며, 실제 상황에 맞게 수정해야 할 수 있습니다. 또한, 코드 작성 시 보안 및 오류 처리를 고려해야 합니다.



예제 코드 (완전 버전)

다음은 "todo"라는 이름의 배열을 localStorage에 저장하고 불러오는 예제 코드입니다. 코드에는 HTML, Javascript, CSS가 포함되어 있으며, 사용자 인터페이스와 기능을 보완했습니다.

HTML (index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>localStorage 예제</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Todo List</h1>
  <input type="text" id="newItem" placeholder="새로운 할 일 추가">
  <button onclick="addItem()">추가</button>
  <ul id="todoList"></ul>

  <script src="script.js"></script>
</body>
</html>

CSS (style.css)

body {
  font-family: sans-serif;
}

#todoList {
  list-style: none;
  padding: 0;
}

#todoList li {
  margin-bottom: 10px;
}

#todoList li.done {
  text-decoration: line-through;
}

Javascript (script.js)

const todoList = [];

function loadArray() {
  const loadedArray = JSON.parse(localStorage.getItem("todoList"));
  if (loadedArray) {
    todoList.push(...loadedArray);
    displayList();
  }
}

function saveArray() {
  localStorage.setItem("todoList", JSON.stringify(todoList));
}

function addItem() {
  const newItem = document.getElementById("newItem").value;
  if (newItem) {
    todoList.push(newItem);
    saveArray();
    displayList();
    document.getElementById("newItem").value = "";
  }
}

function toggleItemDone(index) {
  todoList[index].done = !todoList[index].done;
  saveArray();
  displayList();
}

function removeItem(index) {
  todoList.splice(index, 1);
  saveArray();
  displayList();
}

function displayList() {
  const list = document.getElementById("todoList");
  list.innerHTML = "";

  todoList.forEach((item, index) => {
    const listItem = document.createElement("li");
    listItem.textContent = item.text;
    listItem.className = item.done ? "done" : "";

    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.checked = item.done;
    checkbox.onchange = () => toggleItemDone(index);
    listItem.appendChild(checkbox);

    const deleteButton = document.createElement("button");
    deleteButton.textContent = "삭제";
    deleteButton.onclick = () => removeItem(index);
    listItem.appendChild(deleteButton);

    list.appendChild(listItem);
  });
}

loadArray();

설명

HTML:

  • index.html 파일은 todo 목록을 표시하고 사용자 입력을 처리하는 HTML 코드를 포함합니다.
  • <h1> 태그로 제목 "Todo List"를 표시합니다.
  • input 태그로 새로운 할 일을 입력할 수 있는 텍스트 상자를 제공합니다.
  • button 태그로 "추가" 버튼을 추가하여 새로운 할 일을 목록에 추가합니다.
  • ul 태그로 todo 목록을 표시할 공간을 만듭니다.

CSS:

  • style.css 파일은 todo 목록의 스타일을 정의합니다.
  • 목록 항목에 기본 스타일을 적용합니다.
  • 완료된 항목은 취소선으로 표시합니다.

Javascript:

  • script.js 파일은 todo 목록을 관리하는 Javascript 코드를 포함합니다.
  • todoList 배열은 저장된 todo 항목을 담습니다.
  • loadArray() 함수는 localStorage에서 todo 목록을 불러옵니다.
  • saveArray() 함수는 todo 목록을 localStorage에 저장합니다.
  • addItem() 함수는 새로운 todo 항목을 목록에 추가하고 저장합니다.
  • toggleItemDone() 함수는 항목의 완료 상태를 토글합니다.
  • removeItem() 함수는 목록에서 항목을 제거합니다.
  • displayList() 함수는 todo 목록을 웹 페이지에 표시합니다.

기능

  • 새로운


Javascript, Arrays, HTML을 이용한 localStorage에 배열 저장: 대체 방법

개요

본문에서 소개된 방법 외에도 Javascript, 배열, HTML을 사용하여 localStorage에 배열을 저장하는 몇 가지 대체 방법이 존재합니다.

방법 1: 직렬화 함수 사용

다음은 Array.prototype.toString() 메서드를 사용하여 배열을 직렬화하고 localStorage에 저장하는 방법입니다.

const todoList = ["HTML 공부하기", "CSS 공부하기", "Javascript 공부하기"];

function saveArray() {
  localStorage.setItem("todoList", todoList.toString());
}

function loadArray() {
  const loadedArray = localStorage.getItem("todoList");
  if (loadedArray) {
    const parsedArray = loadedArray.split(",");
    displayList(parsedArray);
  } else {
    console.log("localStorage에 저장된 배열이 없습니다.");
  }
}

// ... (displayList 함수는 동일합니다)

설명:

  • toString() 메서드는 배열의 각 요소를 쉼표로 구분된 문자열로 변환합니다.
  • split() 메서드는 문자열을 다시 배열로 변환합니다.

방법 2: 객체 사용

다음은 배열을 객체로 변환하고 localStorage에 저장하는 방법입니다.

const todoList = {
  items: ["HTML 공부하기", "CSS 공부하기", "Javascript 공부하기"]
};

function saveArray() {
  localStorage.setItem("todoList", JSON.stringify(todoList));
}

function loadArray() {
  const loadedArray = JSON.parse(localStorage.getItem("todoList"));
  if (loadedArray) {
    displayList(loadedArray.items);
  } else {
    console.log("localStorage에 저장된 배열이 없습니다.");
  }
}

// ... (displayList 함수는 동일합니다)

설명:

  • 배열을 items라는 키를 가진 객체 속성으로 저장합니다.
  • JSON.stringify()를 사용하여 객체를 문자열로 변환합니다.
  • JSON.parse()를 사용하여 문자열을 다시 객체로 변환합니다.

주의 사항

  • 위 방법들은 본문에서 소개된 방법보다 성능이 저하될 수 있습니다.
  • 큰 배열을 저장할 경우 JSON.stringify()JSON.parse() 함수의 처리 속도가 느려질 수 있습니다.
  • 특정 상황에서는 특정 방법이 더 적합할 수 있습니다. 예를 들어, 객체를 사용하면 배열에 추가 데이터를 저장하는데 유용할 수 있습니다.

주의

제공된 코드는 예시이며, 실제 상황에 맞게 수정해야 할 수 있습니다. 또한, 코드 작성 시 보안 및 오류 처리를 고려해야 합니다.


javascript arrays html

JavaScript POST 요청: Form Submit과 유사한 방식

XMLHttpRequest 객체 사용:fetch API 사용:jQuery 라이브러리 사용:각 방법은 장단점이 있습니다. XMLHttpRequest 객체는 가장 기본적인 방법이지만, 사용하기 다소 복잡합니다. fetch API는 더 간편하고 현대적인 방법이지만...


hasOwnProperty 메서드 사용

in 연산자 사용:in 연산자는 객체에 특정 속성이 있는지 여부를 확인하는 데 사용됩니다. 다음과 같이 사용할 수 있습니다.위 코드에서 name 속성은 person 객체에 있으므로 true를 출력하고, job 속성은 없으므로 false를 출력합니다...


자바스크립트에서 ==와 ===의 차이점

== 연산자는 두 피연산자의 값만 비교합니다. 데이터 유형은 고려하지 않습니다.예시:위 예시에서 == 연산자는 값만 비교하기 때문에 모두 true를 반환합니다.=== 연산자는 두 피연산자의 값과 데이터 유형 모두 비교합니다...


"Why does Google prepend while(1); to their JSON responses?"에 대한 심층 분석: 자바스크립트, JSON, Ajax의 관점에서

Google은 JSON 응답에 while(1); 코드를 삽입하는 것으로 알려져 있습니다. 이는 익숙하지 않은 행동으로 보일 수 있지만, 실제로는 몇 가지 중요한 목적을 달성하기 위한 것입니다.JSONP 공격 방지:JSONP (JSON Padding)은 클라이언트 측 스크립팅을 통해 서버로부터 JSON 데이터를 가져오는 기술입니다...