HTML5 로컬 저장소의 localStorage 및 sessionStorage에 대한 구체적인 분석

1. 개요

LocalStorage와 sessionStorage를 통칭하여 웹 스토리지라고 하며, 이를 통해 웹 페이지에서 브라우저 측에 데이터를 저장할 수 있습니다.

sessionStorage에 저장된 데이터는 브라우저의 세션에 사용됩니다. 세션이 종료되면(보통 창을 닫으면) localStorage에 저장된 데이터가 오랫동안 존재합니다. 웹사이트를 방문하면 웹페이지에서 이전에 저장된 데이터를 직접 읽을 수 있습니다. 저장 기간이 다른 점을 제외하면 두 객체의 속성과 메서드는 완전히 동일합니다.

쿠키 메커니즘의 향상된 버전과 유사하여 훨씬 더 큰 저장 공간을 사용할 수 있습니다. 현재 도메인당 저장 용량 한도는 브라우저에 따라 다르며, Chrome의 경우 2.5MB, Firefox 및 Opera의 경우 5MB, IE의 경우 10MB입니다. 그 중 Firefox의 저장 공간은 1차 도메인 이름에 따라 결정되지만 다른 브라우저에는 이러한 제한이 없습니다. 즉, Firefox에서는 a.example.com과 b.example이 5MB의 저장 공간을 공유합니다. 또한 쿠키와 마찬가지로 동일한 도메인에 의해 제한됩니다. 웹페이지에 저장된 데이터는 동일한 도메인의 웹페이지에서만 읽을 수 있습니다.

window 객체에 sessionStorage 및 localStorage 속성이 포함되어 있는지 확인하면 브라우저가 이 두 객체를 지원하는지 확인할 수 있습니다.

function checkStorageSupport() {    
var result = {};    
//sessionStorage
    if (window.sessionStorage) {
        result.sessionStorage = true;
    } else {
        result.sessionStorage = false;
    }    //localStorage
    if (window.localStorage) {
        result.localStorage = true;
    } else {
        result.localStorage = false;
    }    return result;

}

2. 연산 방식

2.1 데이터 저장/읽기

sessionStorage와 localStorage에 저장되는 데이터는 "키-값 쌍" 형태로 존재합니다. 즉, 각 데이터 항목에는 키 이름과 해당 값이 있습니다. 모든 데이터는 텍스트 형식으로 저장됩니다.

setItem 메소드를 사용하여 데이터를 저장합니다. 두 개의 매개변수를 허용합니다. 첫 번째는 키 이름이고 두 번째는 저장된 데이터입니다.

sessionStorage.setItem('key', 'value');

localStorage.setTime('key', 'value');

getItem 메소드를 사용하여 데이터를 읽습니다. 여기에는 키 이름이라는 매개변수가 하나만 있습니다.

var valueSession = sessionStorage.getItem('key');var valueLocal = localStorage.getItem('key');

2.2 데이터 지우기

removeItem 메소드는 특정 키 이름에 해당하는 데이터를 지우는 데 사용됩니다.

sessionStorage.removeItem('key');

localStorage.removeItem('key');

clear 메소드는 저장된 데이터를 모두 삭제하는 데 사용됩니다.

sessionStorage.clear();

localStorage.clear();

2.3 순회 연산

길이 속성과 키 방식을 사용하면 모든 키를 순회할 수 있습니다.

for (var i = 0; i < localStorage.length; i++) {
    console.log(localStorage.key(i));
}

키 메소드는 위치(0부터 시작)를 기준으로 키 값을 가져옵니다.

rree

3.storageevent

저장된 데이터가 변경되면 Storage 이벤트가 발생합니다. 이 이벤트에 대해 콜백 함수 를 지정할 수 있습니다.

localStorage.key(1);

콜백 함수는 이벤트 객체를 매개변수로 받습니다. 이 이벤트 객체의 key 속성은 변경된 키 이름을 저장합니다.

window.addEventListener('storage', onStorageChange);

key 속성 외에도 이벤트 객체에는 세 가지 속성이 있습니다.

oldValue: 업데이트 전 값. 키가 새로 추가된 경우 이 속성은 null입니다.

newValue: 업데이트된 값. 키가 삭제된 경우 이 속성은 null입니다.

url: 원래 스토리지 이벤트를 트리거한 웹페이지의 URL입니다.

이 이벤트는 데이터를 변경하는 현재 페이지에서 실행되지 않는다는 점에 주목할 가치가 있습니다. 브라우저가 도메인 이름으로 동시에 여러 페이지를 여는 경우 페이지 중 하나가 sessionStorage 또는 localStorage의 데이터를 변경하면 다른 모든 페이지의 저장 이벤트가 트리거되고 저장 이벤트는 원본에 의해 트리거되지 않습니다. 페이지. 이 메커니즘을 통해 여러 창 간의 통신이 이루어질 수 있습니다. IE를 제외한 모든 브라우저 중에서 모든 페이지에서 저장 이벤트를 트리거합니다.

위 내용은 HTML5 로컬 저장소의 localStorage 및 sessionStorage에 대한 구체적인 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!