HTML5 Web Storage Objects - localstorage 사용법

제목 : HTML5 Web Storage Objects - localstorage 사용법

소스 :

1. 브라우저에서 web storage 를 사용할 수 있는가 체크방법

if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
} else {
    // Sorry! No Web Storage support..
}

2.사용법

The localStorage Object

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.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).";

The sessionStorage Object

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

내용 :

• window.localStorage - stores data with no expiration date
• window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

예제 소스 파일 :

 출처 :  https://www.w3schools.com/html/html5_webstorage.asp