ProgrammingJavascript

localStorage 에 checkbox 상태 저장

, ,

localStorage 에 checkbox 상태 저장

change 이벤트 받기

HTML 에서 checkbox input 삽입

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

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

1
2
3
4
5
6
7
8
9
$(function() {
  $("#checkboxShowGPSInfo").change(function() {
    if ($("#checkboxShowGPSInfo").is(":checked")) {
      alert("체크박스 체크했음!")
    } else {
      alert("체크박스 체크 해제!")
    }
  })
})

localStorage 에 상태저장

1
2
3
4
5
6
7
8
$(function() {
  var checkboxShowGPSInfo = $("#checkboxShowGPSInfo")

  checkboxShowGPSInfo.change(function() {
    showGPSInfo = !!checkboxShowGPSInfo.is(":checked")
    localStorage["showGPSInfo"] = showGPSInfo
  })
})

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

localStorage에서 값 불러오기

1
2
3
4
5
6
7
8
9
10
11
12
$(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으로 변경합니다.

1
showGPSInfo = showGPSInfo === "true"

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

공유하기