JavaScript의 로컬 저장소에 대한 완전한 가이드

이 짧은 기사에서는 JavaScript에서 로컬 저장소의 전체 이론 및 실제 적용을 안내합니다.

시작하기 전에 서버 측 스토리지와 클라이언트 측 스토리지의 차이점을 정의하겠습니다. 둘 다 웹 애플리케이션이 일부 데이터를 저장할 수 있는 위치를 설명하는 웹 개발 용어입니다.
클라이언트 측 저장소는 사용자가 사용자의 브라우저에 데이터를 저장할 수 있도록 하는 반면 서버 측 저장소는 서버/외부 데이터베이스에 데이터를 저장할 수 있습니다.

전제 조건

JavaScript에 대한 기본적인 이해가 필요합니다. 이 프로젝트의 샘플 코드를 테스트하려면 코드 편집기와 브라우저도 필요합니다. 이 튜토리얼에서는 Visual Studio Code와 Google Chrome을 사용할 것입니다.

웹 스토리지에 대해 알아보자

웹 저장소는 웹 응용 프로그램이 키/값 쌍의 형태로 사용자의 브라우저 내에 로컬로 데이터를 저장할 수 있도록 하는 개체입니다.

웹 저장소의 가장 일반적인 두 가지 형태는 로컬 저장소와 세션 저장소입니다. 당분간 이 두 형식에 대해 염두에 두어야 할 유일한 차이점은 local storage에 저장된 데이터는 브라우저를 떠나지 않고 명시적으로 제거할 때까지 그대로 유지되는 반면 session storage에 저장된 데이터는 브라우저가 종료되면 제거된다는 것입니다. 닫은.

로컬 스토리지란 무엇입니까?

로컬 스토리지는 만료일이 없는 키-값 쌍으로 데이터를 저장할 수 있게 해주는 단순한 JavaScript 객체입니다.

여기에 있는 데이터는 사용자의 개별 브라우저에 보존되므로 Chrome을 사용하여 사이트에 액세스하는 경우 로컬 저장소에 저장된 데이터는 현재 사용 중인 기기의 Chrome 브라우저에서만 액세스할 수 있습니다. 즉, 나중에 다른 브라우저로 같은 사이트를 다시 방문하면 데이터에 액세스할 수 없습니다.

로컬 스토리지 액세스

로컬 저장소에 액세스하는 것은 매우 간단하며 몇 단계만 거치면 됩니다.

먼저 F12 키

를 눌러 브라우저의 콘솔을 엽니다.

표시된 콘솔 메뉴에서 application tab를 누르면 아래와 같이 스토리지 탭 아래에 local storage가 표시됩니다.
local storage를 클릭하고 드롭다운 항목을 더 클릭하면 다음과 같이 표시됩니다.

데이터로 채워진 key 및 value 두 개의 열이 있음을 알 수 있습니다. 이것은 현재 로컬 저장소에 저장된 데이터를 나타냅니다.

로컬 스토리지의 방법

우리는 특정 방법을 사용하여 로컬 저장소에 데이터를 추가하거나 제거합니다.
다음은 로컬 저장소의 데이터를 조작하는 데 사용하는 몇 가지 방법을 나타냅니다.

1. setItem( )

로컬 저장소에 데이터를 저장하려면 setItem() 메서드를 사용하면 됩니다. 이 메서드는 두 개의 문자열 매개변수, 이름 및 값을 사용합니다.

localStorage.setItem("name", "Mandy");

It's important to note that local storage saves only strings so if we want to save data (objects, lists, arrays, and so on), we'll need to convert them to strings using JSON.stringify().

이것이 어떻게 작동하는지 봅시다

// Storing Object
const userInfo = {
  name: "Mandy",
  age: 23,
};
localStorage.setItem("user-info", JSON.stringify(userInfo));

// Storing Array
const firstNames = ["John", "Jake", "Vanessa", "Dickson"];
localStorage.setItem("first-names", JSON.stringify(firstNames));

2. getItem()

로컬 저장소에서 데이터를 읽거나 액세스하려면 getItem() 메서드를 사용합니다. 이 메서드는 액세스할 값의 키인 단일 매개변수를 사용합니다.

// Reading Object
const userInfo = JSON.parse(localStorage.getItem("user-info"));

//Reading Array
const firstNames = JSON.parse(localStorage.getItem('firstNames');

Using JSON.parse() converts a string to a javascript object so that we can work with it in our program.

3. 아이템 제거()

removeItem() 메서드를 사용하여 데이터를 제거합니다. 이 메서드는 값을 제거하려는 키인 단일 매개변수를 사용합니다.

localStorage.removeItem("name");

4. 키()

key() mm 메서드를 사용하면 지정된 인덱스의 로컬 저장소에서 데이터를 찾는 데 도움이 됩니다.

localStorage.key(2);

5. 클리어()

clear() 메서드를 사용하여 로컬 저장소에서 모든 데이터를 제거합니다.

localStorage.clear()  

로컬 스토리지에 대한 참고 사항

로컬 저장소에는 데이터 보호 기능이 없으므로 페이지의 모든 사람이 액세스할 수 있는 민감한 데이터를 저장하는 것은 안전하지 않습니다.

로컬 저장소는 브라우저에 최대 5MB의 데이터만 저장할 수 있습니다.

마무리

이 기사에서는 다음을 배웠습니다.

서버 및 클라이언트 측 저장소의 정의

웹 스토리지

로컬 스토리지

로컬 저장소의 데이터 조작 방법

팔로우해주셔서 감사합니다. 유용한 정보를 얻으셨기를 바랍니다.

이와 같은 콘텐츠에 관심이 있으시면 저를 팔로우하여 더 많은 정보를 얻으십시오.