> 웹 프론트엔드 > JS 튜토리얼 > HTML5 localStorage 및 sessionStorage에서 JavaScript 개체를 어떻게 저장하고 검색할 수 있습니까?

HTML5 localStorage 및 sessionStorage에서 JavaScript 개체를 어떻게 저장하고 검색할 수 있습니까?

Susan Sarandon
풀어 주다: 2024-12-25 18:47:10
원래의
894명이 탐색했습니다.

How Can I Store and Retrieve JavaScript Objects in HTML5 localStorage and sessionStorage?

HTML5 localStorage 및 sessionStorage에 객체 저장

객체는 HTML5의 localStorage 또는 sessionStorage 내에서 기본적으로 지원되지 않습니다. 객체를 직접 저장하려고 하면 문자열로 직렬화됩니다.

이 제한을 피하려면 다음 해결 방법을 고려하십시오.

  1. 객체 문자열화: 객체를 저장하기 전에 JSON.stringify를 사용하여 JSON 문자열로 변환하세요.
  2. 객체를 저장하세요. 문자열: setItem('key', JSON_string)을 사용하여 localStorage 또는 sessionStorage의 키에 JSON 문자열을 할당합니다.
  3. 문자열 검색: 객체를 가져올 때 JSON을 가져옵니다. getItem('key')을 사용하는 문자열.
  4. 파싱 문자열: JSON.parse를 사용하여 검색된 문자열을 다시 객체로 변환합니다.

예:

const testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Stringify and store
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve and parse
const retrievedObject = JSON.parse(localStorage.getItem('testObject'));

console.log('Retrieved object:', retrievedObject);
로그인 후 복사

이 기술을 사용하면 localStorage에 JavaScript 객체를 저장하고 검색할 수 있습니다. 본질적인 문자열 기반 저장소 특성에도 불구하고 sessionStorage.

위 내용은 HTML5 localStorage 및 sessionStorage에서 JavaScript 개체를 어떻게 저장하고 검색할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿