title: “localStorage 에 checkbox 상태 저장”
date: 2018.09.04
tags: [localStorage, checkbox, input]
categories:

1. programming
2. javascript

—

HTML 에서 checkbox input 삽입

snippet.javascript

<input type="checkbox" id="checkboxShowGPSInfo" />

자바스크립트에서 change 이벤트 정의

snippet.javascript

$(function () {
    $("#checkboxShowGPSInfo").change(function(){
        if($("#checkboxShowGPSInfo").is(":checked")){
            alert("체크박스 체크했음!");
        }else{
            alert("체크박스 체크 해제!");
        }
    });
});

snippet.javascript

$(function () {
    var checkboxShowGPSInfo = $("#checkboxShowGPSInfo");
 
    checkboxShowGPSInfo.change(function () {
        showGPSInfo = !!checkboxShowGPSInfo.is(":checked");
        localStorage['showGPSInfo'] = showGPSInfo;
    });
});

change 이벤트시에 showGPSInfo 이름으로 상태값을 저장합니다.

snippet.javascript

$(function () {
    showGPSInfo = localStorage['showGPSInfo'] || false;
    showGPSInfo = showGPSInfo === "true";
 
    var checkboxShowGPSInfo = $("#checkboxShowGPSInfo");
    checkboxShowGPSInfo.prop('checked', showGPSInfo);
 
    checkboxShowGPSInfo.change(function () {
        showGPSInfo = !!checkboxShowGPSInfo.is(":checked");
        localStorage['showGPSInfo'] = showGPSInfo;
    });
});

localStorage 에서는 모든값을 문자열로 저장하기 때문에 이를 확인하여 boolean으로 변경합니다.

snippet.javascript

showGPSInfo = showGPSInfo === "true";

showGPSInfo 의 값이 “true” 이면 true 를 할당합니다. 아니면 false 입니다.