JavaScript의 로컬 저장소 이해

로컬 스토리지는 개발자가 브라우저에서 직접 데이터를 저장, 검색, 관리할 수 있는 필수 브라우저 기반 API입니다. 세션 저장소와 달리 로컬 저장소는 브라우저를 닫은 후에도 유지되므로 사용자 기본 설정, 앱 설정 또는 세션 간에 유지되어야 하는 모든 종류의 데이터를 저장하는 데 이상적입니다. 그러나 데이터는 해당 데이터가 저장된 브라우저로 제한된다는 점에 유의하는 것이 중요합니다. 예를 들어 Chrome에 저장된 데이터는 Firefox에서 사용할 수 없습니다.

로컬 저장소의 작동 방식

로컬 저장소를 사용하기 전에 JSON 형식으로 데이터를 저장한다는 점을 이해하는 것이 중요합니다. 즉, JavaScript 개체를 저장하는 경우 먼저 JSON으로 변환하고 데이터를 검색할 때 다시 JavaScript 개체로 변환해야 합니다.

예:

const user = {
  name: "AliceDoe"
};
const userToJSON = JSON.stringify(user); // Convert object to JSON

브라우저에서 로컬 저장소 보기

브라우저의 개발자 도구를 사용하여 로컬 저장소에 저장된 데이터를 보고 상호 작용할 수 있습니다. 빠른 가이드는 다음과 같습니다.

1. 웹페이지를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택하거나 F12를 누르세요.
2. 신청 탭을 엽니다.
3. 왼쪽 패널의 저장소 섹션에서 로컬 저장소를 찾으면 저장된 데이터가 키-값 쌍으로 표시되는 것을 볼 수 있습니다.

로컬 저장소에 새 레코드 생성

로컬 저장소에 데이터를 저장하려면 다음 단계를 따르세요.

const user = {
  name: "AliceDoe"
};

const userToJSON = JSON.stringify(user); // Convert to JSON
localStorage.setItem("user", userToJSON); // Save the item

이 예에서는:

• 키는 "사용자"입니다.
• 값은 JSON 형식의 문자열화된 개체입니다.

로컬 저장소에서 데이터 읽기

로컬 저장소에서 데이터를 검색할 때 JSON 문자열을 다시 JavaScript 개체로 변환해야 합니다.

const userJSON = localStorage.getItem("user"); // Retrieve data
const userObject = JSON.parse(userJSON); // Convert back to JS object
console.log(userObject); // { name: "AliceDoe" }

로컬 저장소의 기존 데이터 업데이트

로컬 저장소에서 데이터를 업데이트하는 것은 새 레코드를 만드는 것과 유사합니다. 즉, 기본적으로 이전 데이터를 덮어씁니다.

const updatedUser = {
  name: "AliceDoe",
  age: 25
};

const updatedUserJSON = JSON.stringify(updatedUser);
localStorage.setItem("user", updatedUserJSON); // Overwrite the record

로컬 저장소에서 데이터 삭제

마지막으로 로컬 저장소에서 기록을 제거하려면 다음과 같이 RemoveItem 메소드를 사용할 수 있습니다.

localStorage.removeItem("user"); // Remove the "user" record

이렇게 하면 "사용자" 키와 관련된 기록이 삭제됩니다.

결론

로컬 스토리지는 JavaScript의 클라이언트측 데이터 지속성을 위한 강력하고 사용하기 쉬운 도구입니다. 레코드를 생성, 읽기, 업데이트 및 삭제하는 방법을 이해하면 브라우저 세션 전반에 걸쳐 지속되는 중요한 데이터를 저장하여 사용자 경험을 향상시킬 수 있습니다. 그러나 로컬 저장소는 특정 브라우저 및 도메인으로 제한되며 암호화되지 않으므로 민감한 데이터에 사용해서는 안 된다는 점을 기억하는 것도 중요합니다.

로컬 저장소를 애플리케이션에 통합하면 특정 작업에 대한 전체 백엔드 솔루션이 필요 없이 기능을 향상시킬 수 있습니다.

---

인용:

• MDN 웹 문서, "LocalStorage", https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

위 내용은 JavaScript의 로컬 저장소 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!