HTML 로컬 스토리지

HTML 로컬 스토리지: 쿠키보다 우수합니다.

HTML 로컬 스토리지는 무엇인가요?

로컬 스토리지(로컬 스토리지)를 통해 웹 애플리케이션은 사용자 브라우저에서 데이터를 로컬로 저장할 수 있습니다.

HTML5 이전에는, 애플리케이션 데이터는 서버 요청을 포함하여 쿠키에만 저장될 수 있었으며, 로컬 스토리지는 더 안전하며 웹사이트 성능에 영향을 미치지 않고 대량의 데이터를 로컬에 저장할 수 있습니다.

쿠키와 달리, 저장 제한이 훨씬 큽니다(최소 5MB) 그리고 정보는 서버로 전송되지 않습니다.

로컬 스토리지는 원점(오리진)(도메인과 프로토콜을 통해)을 통해 저장됩니다. 모든 페이지는 원점에서 동일한 데이터를 저장하고 액세스할 수 있습니다.

브라우저 지원

표에서는 로컬 스토리지를 완전히 지원하는 첫 번째 브라우저 버전을 표시합니다。

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML 로컬 스토리지 객체

HTML 로컬 스토리지는 클라이언트에서 데이터를 저장하는 두 개의 객체를 제공합니다：

  • window.localStorage - 만료일이 없는 데이터를 저장합니다
  • window.sessionStorage - 세션에 대한 데이터를 저장합니다(브라우저 태그 페이지를 닫을 때 데이터가 손실됩니다)

로컬 스토리지를 사용할 때, localStorage와 sessionStorage의 브라우저 지원을 확인하세요：

if (typeof(Storage) !== "undefined") {
    // localStorage/sessionStorage에 대한 코드
} else {
    // 죄송합니다! Web Storage를 지원하지 않습니다..
}

localStorage 객체

localStorage 객체는 만료일이 없는 데이터를 저장합니다. 브라우저가 닫히면 데이터가 지워지지 않으며, 다음 날, 주 또는 연도 중에도 사용할 수 있습니다。

예제

// 저장
localStorage.setItem("lastname", "Gates");
// 가져오기
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

직접 시도해 보세요

예시 설명:

  • localStorage 이름/값 쌍을 생성합니다. name="lastname", value="Gates"
  • "lastname"의 값을 가져와 id="result"의 요소에 삽입합니다

이 예제는 다음과 같이도 작성할 수 있습니다：

// 저장
localStorage.lastname = "Gates";
// 가져오기
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 = "이제까지, 이 버튼을 클릭하셨습니다 " +
localStorage.clickcount + " 번.";

직접 시도해 보세요

sessionStorage 객체

sessionStorage 객체는 localStorage 객체와 동일하지만, 특정 session에만 데이터를 저장합니다. 사용자가 특정 브라우저 태그 페이지를 닫으면 데이터도 삭제됩니다.

다음 예제는 현재 session에서 사용자가 버튼을 클릭한 횟수를 세킵니다:

예제

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "이 session에서, 이 버튼을 클릭하셨습니다 " +
sessionStorage.clickcount + " 번.";

직접 시도해 보세요