HTML5 로컬 저장소

HTML 로컬 저장소 란 무엇입니까?

로컬 스토리지를 사용하면 웹 응용 프로그램이 사용자 브라우저에 로컬로 데이터를 저장할 수 있습니다.

HTML5 이전에는 애플리케이션 데이터를 모든 서버 요청에 포함 된 쿠키에 저장해야했습니다. 로컬 저장소는 더 안전하며 대량의 데이터를 웹 사이트 성능에 영향을 미치지 않고 로컬에 저장할 수 있습니다.

쿠키와 달리 저장 용량 한도는 훨씬 크며 (최소 5MB) 정보는 서버로 전송되지 않습니다.

로컬 저장소는 원본 (도메인 및 프로토콜 당) 당입니다. 한 원점의 모든 페이지는 동일한 데이터를 저장하고 액세스 할 수 있습니다.

HTML 로컬 저장소 객체

HTML 로컬 스토리지는 클라이언트에 데이터를 저장하기위한 두 가지 객체를 제공합니다.

1.window.localStorage - 만료 날짜가없는 데이터를 저장합니다.

2.window.sessionStorage - 하나의 세션에 대한 데이터를 저장합니다 (브라우저 탭이 닫히면 데이터가 손실됩니다)

로컬 저장소를 사용하기 전에 localStorage 및 sessionStorage에 대한 브라우저 지원을 확인하십시오.

if (typeof(Storage) !== "undefined") {

    // Code for localStorage/sessionStorage.

} else {

    // Sorry! No Web Storage support..

}

localStorage 개체

localStorage 개체는 만료 날짜가없는 데이터를 저장합니다. 브라우저를 닫을 때 데이터가 삭제되지 않으며 다음 날, 일주일 또는 1 년 동안 사용할 수 있습니다.

// Store

localStorage.setItem("lastname", "Smith");

// Retrieve

document.getElementById("result").innerHTML = localStorage.getItem("lastname");

예제 설명 :

1.name = "lastname"및 value = "Smith"인 localStorage 이름 / 값 쌍을 만듭니다.

2."lastname"의 값을 검색하여 id = "result"를 가진 요소에 삽입하십시오.

위의 예는 다음과 같이 작성할 수도 있습니다.

// Store

localStorage.lastname = "Smith";

// Retrieve

document.getElementById("result").innerHTML = localStorage.lastname;

"lastname"localStorage 항목을 제거하는 구문은 다음과 같습니다.

localStorage.removeItem("lastname");

참고 : 이름 / 값 쌍은 항상 문자열로 저장됩니다. 필요한 경우 다른 형식으로 변환하십시오!

다음 예제는 사용자가 버튼을 클릭 한 횟수를 계산합니다. 이 코드에서는 값 문자열을 숫자로 변환하여 카운터를 늘릴 수 있습니다.

if (localStorage.clickcount) {

    localStorage.clickcount = Number(localStorage.clickcount) + 1;

} else {

    localStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "You have clicked the button " +

localStorage.clickcount + " time(s).";

sessionStorage 객체

sessionStorage 객체는 하나의 세션에 대해서만 데이터를 저장한다는 점 을 제외하고 는 localStorage 객체와 같습니다 . 사용자가 특정 브라우저 탭을 닫으면 데이터가 삭제됩니다.

다음 예제는 현재 세션에서 사용자가 버튼을 클릭 한 횟수를 계산합니다.

if (sessionStorage.clickcount) {

    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;

} else {

    sessionStorage.clickcount = 1;

}

document.getElementById("result").innerHTML = "You have clicked the button " +

sessionStorage.clickcount + " time(s) in this session.";