HTML 로컬 스토리지

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

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

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

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 + " 번.";

직접 시도해보세요