로컬 저장소 이해: 이 불가사의한 파일의 신비를 밝혀내다

LocalStorage 암호 해독: 이 신비한 파일은 무엇인가요?

인터넷이 발달하면서 웹 개발이 점점 보편화되었고, 사람들의 개인정보와 데이터도 브라우저에 광범위하게 저장됩니다. 그리고 신비한 파일 중 하나는 LocalStorage입니다. 그렇다면 LocalStorage란 정확히 무엇입니까? 이 기사에서는 LocalStorage의 원리와 사용법을 해독하고 구체적인 코드 예제를 제공합니다.

LocalStorage는 브라우저에서 제공하는 웹 저장 메커니즘으로, 브라우저에서 키-값 쌍 데이터를 저장하고 검색할 수 있습니다. 기존 쿠키와 비교하여 LocalStorage는 더 큰 저장 용량(보통 5MB)과 더 긴 저장 기간(영구 저장)을 가지고 있습니다. 만료 시간이 없으면 LocalStorage 데이터는 항상 사용자의 브라우저에 존재하며 브라우저를 닫아도 지워지지 않습니다.

LocalStorage는 사용이 매우 간단합니다. JavaScript를 사용하여 LocalStorage를 작동하고, setItem() 메서드를 통해 키-값 쌍 데이터를 설정하고, getItem() 메서드를 통해 데이터를 얻고, RemoveItem() 메서드를 통해 데이터를 삭제할 수 있습니다. 다음은 몇 가지 기본 샘플 코드입니다.

// LocalStorage 데이터 설정
localStorage.setItem('name', 'David')
localStorage.setItem('age', '28')// LocalStorage 데이터 가져오기

console.log(localStorage.getItem('name')); // 출력: David

console.log(localStorage.getItem('age')) // 출력: 28

// LocalStorage 데이터 삭제

localStorage.removeItem ('name');

console.log(localStorage.getItem('name')); // 출력: null

LocalStorage는 문자열 유형 데이터뿐만 아니라 숫자 및 부울 값과 같은 기타 기본 데이터 유형도 저장할 수 있습니다. 대기 중. LocalStorage는 객체 유형 데이터를 저장할 수도 있으며 객체를 JSON 형식으로 변환하기만 하면 됩니다. 샘플 코드는 다음과 같습니다.

//LocalStorage 객체 데이터 설정

var user = {

name: 'David',
age: 28,
email: 'david@example.com'
};
localStorage.setItem( 'user' , JSON.stringify(user));

// LocalStorage 객체 데이터 가져오기

var StoredUser = JSON.parse(localStorage.getItem('user'));

console.log(storedUser.name); // Output: David
console.log(storedUser.age); // Output: 28
console.log(storedUser.email); // Output: david@example.com

LocalStorage 데이터는 LocalStorage가 다른 도메인 이름 단위로 저장됩니다. 도메인 이름 아래의 데이터는 독립적입니다. 이는 동일한 브라우저에서 다른 도메인 이름의 웹페이지가 LocalStorage 데이터를 공유할 수 없음을 의미합니다. 이는 사용자의 개인정보와 보안을 보호하기 위한 것입니다.

LocalStorage는 간단한 설정 및 데이터 획득 외에도 데이터 변경 사항을 모니터링할 수도 있습니다. addEventListener() 메소드를 통해 LocalStorage에 변경 이벤트 리스너를 추가할 수 있습니다. LocalStorage의 데이터가 변경되면 이벤트가 트리거됩니다. 샘플 코드는 다음과 같습니다.

// LocalStorage 데이터 변경 모니터링

window.addEventListener('storage', function(e) {

console.log('LocalStorage 데이터 변경:', e.key, e.newValue);
}) ;

//LocalStorage 데이터 수정

localStorage.setItem('name', 'Emily');

//콘솔 출력: LocalStorage 데이터 변경: 이름 Emily

요약: LocalStorage는 신비하고 강력한 웹 저장소 메커니즘입니다. , 브라우저에 데이터를 저장하고 검색할 수 있습니다. LocalStorage의 사용은 매우 간단하며, setItem(), getItem() 및 RemoveItem() 메서드를 통해 데이터를 쉽게 조작할 수 있습니다. LocalStorage 데이터는 도메인 이름 단위로 저장되며, 서로 다른 도메인 이름의 LocalStorage 데이터는 독립적입니다. LocalStorage 데이터의 변경 사항은 addEventListener() 메서드를 통해 모니터링할 수 있습니다. LocalStorage를 사용하면 개발자가 데이터를 보다 편리하게 저장 및 관리하고 더 나은 사용자 경험을 제공할 수 있습니다. 이 기사가 LocalStorage를 해독하는 데 도움이 되기를 바랍니다!

위 내용은 로컬 저장소 이해: 이 불가사의한 파일의 신비를 밝혀내다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!