HTML5 localStorage/sessionStorage에 객체를 저장하는 방법 (JavaScript, HTML) - 대체 방법

2024-04-25

HTML5 localStorage/sessionStorage에 객체를 저장하는 방법 (JavaScript, HTML)

  • localStorage: 이 저장소는 브라우저가 닫히거나 사용자가 로그 아웃하더라도 만료되지 않는 데이터를 저장하는 데 사용됩니다.
  • sessionStorage: 이 저장소는 사용자가 브라우저 세션을 종료할 때까지 데이터를 저장하는 데 사용됩니다.

객체 저장

localStorage 또는 sessionStorage에 객체를 저장하려면 JSON.stringify() 함수를 사용하여 먼저 문자열로 변환해야 합니다. 다음은 객체를 저장하고 나중에 검색하는 방법의 예입니다.

JavaScript

// 객체 저장
var person = {
  name: "홍길동",
  age: 30,
  city: "서울"
};

localStorage.setItem("person", JSON.stringify(person));

// 객체 검색
var retrievedPerson = JSON.parse(localStorage.getItem("person"));
console.log(retrievedPerson.name); // 홍길동
console.log(retrievedPerson.age); // 30
console.log(retrievedPerson.city); // 서울

HTML

<!DOCTYPE html>
<html>
<head>
  <title>객체 저장 및 검색</title>
</head>
<body>
  <script>
    // 객체 저장
    var person = {
      name: "홍길동",
      age: 30,
      city: "서울"
    };

    localStorage.setItem("person", JSON.stringify(person));

    // 객체 검색
    var retrievedPerson = JSON.parse(localStorage.getItem("person"));
    console.log(retrievedPerson.name); // 홍길동
    console.log(retrievedPerson.age); // 30
    console.log(retrievedPerson.city); // 서울
  </script>
</body>
</html>

주의 사항:

  • localStorage 및 sessionStorage는 브라우저마다 저장 공간이 제한됩니다. 이러한 저장 공간이 가득 차면 오류가 발생할 수 있습니다.
  • localStorage 및 sessionStorage에 저장된 데이터는 모든 웹사이트에서 액세스할 수 있습니다. 따라서 민감한 데이터를 저장할 때는 주의해야 합니다.



HTML5 localStorage/sessionStorage에 객체를 저장하는 방법 (JavaScript, HTML) - 예제 코드

// 객체 저장
var person = {
  name: "홍길동",
  age: 30,
  city: "서울",
  hobbies: ["독서", "영화 감상", "여행"]
};

localStorage.setItem("person", JSON.stringify(person));

// 객체 검색
var retrievedPerson = JSON.parse(localStorage.getItem("person"));
console.log("이름:", retrievedPerson.name); // 홍길동
console.log("나이:", retrievedPerson.age); // 30
console.log("도시:", retrievedPerson.city); // 서울
console.log("취미:", retrievedPerson.hobbies); // ["독서", "영화 감상", "여행"]
<!DOCTYPE html>
<html>
<head>
  <title>객체 저장 및 검색</title>
</head>
<body>
  <script>
    // 객체 저장
    var person = {
      name: "홍길동",
      age: 30,
      city: "서울",
      hobbies: ["독서", "영화 감상", "여행"]
    };

    localStorage.setItem("person", JSON.stringify(person));

    // 객체 검색
    var retrievedPerson = JSON.parse(localStorage.getItem("person"));
    document.getElementById("name").innerHTML = retrievedPerson.name;
    document.getElementById("age").innerHTML = retrievedPerson.age;
    document.getElementById("city").innerHTML = retrievedPerson.city;
    var hobbiesList = document.getElementById("hobbies");
    for (var i = 0; i < retrievedPerson.hobbies.length; i++) {
      var hobby = retrievedPerson.hobbies[i];
      var listItem = document.createElement("li");
      listItem.textContent = hobby;
      hobbiesList.appendChild(listItem);
    }
  </script>

  <div>
    이름: <span id="name"></span><br>
    나이: <span id="age"></span><br>
    도시: <span id="city"></span><br>
    취미: <ul id="hobbies"></ul>
  </div>
</body>
</html>

설명:

  • 위 예제에서는 person이라는 객체를 생성하고 localStorage에 저장합니다.
  • localStorage.setItem() 함수는 키와 값을 인수로 받습니다. 키는 객체를 식별하는 데 사용되고 값은 JSON 문자열로 변환된 객체입니다.
  • localStorage.getItem() 함수는 키를 인수로 받고 해당 키와 연결된 값을 반환합니다.
  • JSON.stringify() 함수는 JavaScript 객체를 JSON 문자열로 변환합니다.
  • JSON.parse() 함수는 JSON 문자열을 JavaScript 객체로 변환합니다.
  • HTML 코드에는 name, age, city, hobbies 요소가 있습니다. 이 요소들은 JavaScript 코드에서 검색된 객체 속성 값으로 채워집니다.

추가 예제:

  • 객체 업데이트:
// 객체 업데이트
var person = JSON.parse(localStorage.getItem("person"));
person.age = 35;
localStorage.setItem("person", JSON.stringify(person));
  • 객체 삭제:
// 객체 삭제
localStorage.removeItem("person");
  • sessionStorage 사용:
// 객체 저장 (sessionStorage)
var person = {
  name: "홍길동",
  age: 30,
  city: "서울"
};

sessionStorage.setItem("person", JSON.stringify(person));

// 객체 검색 (sessionStorage)
var retrievedPerson = JSON.parse(sessionStorage.getItem("person"));
console.log(retrievedPerson.name); // 홍길동
console.log(retrievedPerson.age); // 30
console.log(retrievedPerson.city); // 서울
  • JSON.parse(): [https



HTML5 localStorage/sessionStorage에 객체를 저장하는 방법 (JavaScript, HTML) - 대체 방법

IndexedDB는 브라우저에서 제공하는 데이터베이스 API입니다. localStorage 및 sessionStorage보다 더 강력하고 유연하며, 더 많은 데이터를 저장할 수 있습니다. 또한, 트랜잭션과 인덱스와 같은 고급 기능을 제공합니다.

IndexedDB를 사용하는 장점:

  • 더 많은 데이터를 저장할 수 있습니다.
  • 트랜잭션과 인덱스와 같은 고급 기능을 제공합니다.
  • localStorage 및 sessionStorage보다 복잡합니다.
  • 모든 브라우저에서 동일하게 지원되지 않습니다.
// 객체 저장 (IndexedDB)
var db = openDB("myDatabase", 1);
var store = db.transaction("myStore", "readwrite").objectStore("people");
store.put({ name: "홍길동", age: 30, city: "서울" });

// 객체 검색 (IndexedDB)
var db = openDB("myDatabase", 1);
var store = db.transaction("myStore", "readonly").objectStore("people");
store.get("홍길동").onsuccess = function(event) {
  var person = event.target.result;
  console.log(person.name); // 홍길동
  console.log(person.age); // 30
  console.log(person.city); // 서울
};

Web Storage API의 Web Storage Polyfill

Web Storage Polyfill은 localStorage 및 sessionStorage가 모든 브라우저에서 동일하게 작동하도록 하는 JavaScript 라이브러리입니다. 이 라이브러리는 IE8과 같은 구형 브라우저에서도 localStorage 및 sessionStorage 기능을 사용할 수 있도록 합니다.

Web Storage Polyfill 사용 예제:

// 객체 저장 (Web Storage Polyfill)
if (!window.localStorage) {
  require("webstorage-polyfill");
}

localStorage.setItem("person", JSON.stringify({ name: "홍길동", age: 30, city: "서울" }));

// 객체 검색 (Web Storage Polyfill)
if (!window.localStorage) {
  require("webstorage-polyfill");
}

var retrievedPerson = JSON.parse(localStorage.getItem("person"));
console.log(retrievedPerson.name); // 홍길동
console.log(retrievedPerson.age); // 30
console.log(retrievedPerson.city); // 서울

쿠키는 웹 서버에서 클라이언트 브라우저에 저장하는 작은 데이터 조각입니다. 쿠키는 사용자 인증, 사용자 설정 저장, 웹 분석 추적과 같은 다양한 용도로 사용할 수 있습니다.

쿠키를 사용하는 장점:

  • 서버에서 설정 및 읽을 수 있습니다.
  • 여러 도메인에서 사용할 수 있습니다.
  • HTTP 요청 헤더에 포함되어 전송되므로 보안 취약성이 발생할 수 있습니다.
  • 저장 공간이 제한되어 있습니다.

쿠키를 사용하여 객체를 저장하는 예제:

// 객체 저장 (쿠키)
document.cookie = "person=" + JSON.stringify({ name: "홍길동", age: 30, city: "서울" });

// 객체 검색 (쿠키)
var personString = document.cookie.match(/person=(.*?);/)[1];
var retrievedPerson = JSON.parse(personString);
console.log(retrievedPerson.name); // 홍길동
console.log(retrievedPerson.age); // 30
console.log(retrievedPerson.city); // 서울

javascript html local-storage


JavaScript를 사용하여 JSON을 예쁘게 출력하는 방법

JavaScript에는 JSON을 예쁘게 출력하는 데 사용할 수 있는 두 가지 기본 방법이 있습니다.JSON. stringify() 메서드는 JavaScript 객체를 JSON 문자열로 변환합니다. 두 번째 인수로 옵션 객체를 전달하면 들여쓰기 수준과 공백 문자를 지정할 수 있습니다...


AngularJS와 Django에서 충돌하는 템플릿 태그 문제 해결

문제AngularJS와 Django 템플릿 엔진은 모두 템플릿 내에서 변수를 삽입하는 데 사용하는 특수 문법을 가지고 있습니다. AngularJS는 {{ }} 문법을 사용하는 반면, Django는 {% } 및 {{ }} 문법을 사용합니다...


HTML 및 CSS에서 '절대 위치이지만 부모에 상대적인 위치' 설정하기

**절대 위치 (absolute)**는 요소를 뷰포트 (보이는 화면 영역)에 대해 절대적으로 위치시키는 방식입니다. 즉, 요소의 위치는 주변 요소에 영향을 받지 않고 top, left, bottom, right 속성을 사용하여 자유롭게 설정할 수 있습니다...


JavaScript, Node.js 및 NPM에서 스크립트 자동화를 위한 고급 팁

Node. js에서 NPM 스크립트를 실행할 때 커맨드 라인 인수를 전달하여 스크립트의 동작을 조정할 수 있습니다. 이는 다양한 작업을 자동화하고 스크립트 실행 방식을 사용자 정의하는 데 유용한 기능입니다.방법NPM 스크립트에 커맨드 라인 인수를 전달하는 두 가지 주요 방법이 있습니다...


HTML, CSS, Flexbox를 사용하여 요소를 하단에 정렬하는 방법

가장 간단한 방법은 align-items 속성을 사용하는 것입니다. align-items 속성은 flex 컨테이너 내의 모든 자식 요소의 수직 정렬을 지정합니다. 다음 값을 사용하여 요소를 하단에 정렬할 수 있습니다...


javascript html local storage

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

개요웹 브라우저는 사용자 설정, 데이터 등을 저장할 수 있는 저장공간을 제공합니다. 이 중 localStorage는 브라우저 종료 후에도 유지되는 영구 저장공간입니다.본 가이드에서는 Javascript, 배열, HTML을 활용하여 localStorage에 배열을 저장하고 불러오는 방법을 단계별로 설명합니다