Local Storage(로컬 스토리지) 를 사용해보자

그런데 로컬 스토리지가 무엇일까?

로컬 스토리지는 HTML5에서 새로 생긴 저장소로써 개별적인 저장소를 이용하는 것이 아닌 브라우저 자체적으로 내장되어 있으며 직접 지우기 전까지는 사라지지 않는다
(비슷한 세션 스토리지도 있는데 이는 브라우저를 닫을 때 삭제가 된다.)

또한 이것들이 나오기 전 사용하던 쿠키와 비교할 수도 있는데 쿠키는 서버에 요청해 전송하고 받아오는 메커니즘으로 4kb밖에 사용하지 못하며 만료기한이 있다.

클라이언트 측에 직접 저장이 되는 스토리지이므로 흔히 쇼핑몰에서 최근 본 상품이나 장바구니 등에 사용할 수 있으며 브라우저를 나갔다 들어와도 그대로 남아있는 경험을 해보았을 것이다.

그럼 어떻게 작동하는지 한번 사용해 보자

var a = 0;
var b = 0;
$(".Num1").text(0);

$(".Num2").text(window.localStorage.getItem('b'));
$(document).ready(function () {
  $(".Button1").click(function () {
   a = a+1;
    $(".Num1").text(a);
  });
});

$(document).ready(function () {
  $(".Button2").click(function () {
    var c = window.localStorage.getItem('b');
    window.localStorage.setItem('b',JSON.parse(c)+1);
    var c = window.localStorage.getItem('b');
    $(".Num2").text(c);
  });
});

$(document).ready(function () {
  $(".Reset").click(function () {
    a = 0;
    $(".Num1").text(0);
    var c = window.localStorage.getItem('b');
    window.localStorage.setItem('b',0);
    var c = window.localStorage.getItem('b');
    $(".Num2").text(c);
  });
});

왼쪽의 일반 버튼을 누르면 숫자가 올라가지만 따로 스토리지에 올라가지 않아
세션만 바뀌어도 값이 사라지게 된다

오른쪽의 로컬 버튼을 누르면

var c = window.localStorage.getItem('b');
window.localStorage.setItem('b',JSON.parse(c)+1);
var c = window.localStorage.getItem('b');
$(".Num2").text(c);

로컬 스토리지에 저장을 하고 그 저장한 값을 다시 불러와 Num2 객체의
text값으로 변경하게 된다.
따라서 세션이 바뀌거나 브라우저를 종료했다 다시 들어가더라도 브라우저 내에 있는 로컬 스토리지에 값은 사라지지 않기 때문에 그대로 존재하게 된다.

reset 버튼을 누르면 스토리지에 저장된 값을 다시 0으로 바뀌게 설정하였다.