LocalStorage 란?
localStorage를 사용하면, 브라우저에 key-value 값을 Storage에 저장할 수 있습니다.
저장한 데이터는 새로고침 해도 유지됩니다.
<h1>localStorage 객체 활용해보기</h1>
<p>
웹브라우저의 javascript 실행환경에서는 해당 웹브라우저가 실행되는 기기의 파일 시스템에
접근을 할수가 없다 (파일 업로드를 위해 파일을 선택하는 경우는 제외)
따라서 파일시스템에 어떤 정보를 영구 저장을 할수가 없다.
</p>
<input type="text" id="inputMsg" placeholder="메세지 입력...">
<button id="saveBtn">저장</button>
<button id="deleteBtn">삭제</button>
<p>
localStorage 에 저장된 메세지 : <strong id="result"></strong>
</p>
html 영역에 button 저장, 삭제 버튼 두개와 input 필드를 하나 생성하였다.
저장버튼을 누를 경우 p 요소에 저장된 텍스트가 출력하게 되고 삭제 버튼을 누를 경우 저장된 메세지가 삭제되는 기능을 만들어 보겠습니다.
if (localStorage.savedMsg!=undefined) {
// localStorage 에 saveMsg 라는 키값으로 저장된 문자열을 출력하기
document.querySelector("#result").innerText = localStorage.savedMsg;
} else {
document.querySelector("#result").innerText = "저장된 메세지가 없습니다."
}
페이지 로딩 시점에 localStorage에 값이 저장되어있으면 innerText에 출력
let savedMsg;
document.querySelector("#saveBtn").addEventListener("click", ()=>{
// 입력한 문자열을 읽어와서
let msg = document.querySelector("#inputMsg").value;
// 전역변수에 저장하면 언제까지 유지가 될까?
savedMsg = msg;
// localStorage 에 저장해보기
localStorage.savedMsg = msg;
if (localStorage.savedMsg!=undefined) {
// localStorage 에 saveMsg 라는 키값으로 저장된 문자열을 출력하기
document.querySelector("#result").innerText = localStorage.savedMsg;
} else {
document.querySelector("#result").innerText = "저장된 메세지가 없습니다."
}
});
전역변수로 savedMsg 를 먼저 선언하고
이벤트 리스너를 사용하여 saveBtn 에 click 이벤트가 발생 할 경우 inputMsg에 입력되어있던 값이 savedMsg에 저장
저장 버튼을 누른 후 p 요소 안에 result id값의 strong가 localStorage에 값이 있으면 값을 출력
document.querySelector("#deleteBtn").addEventListener("click", ()=>{
// object 의 특정 key 값을 삭제하는 방법
// delete 라는 예약어와 함께 삭제할 방을 참조하면 된다.
delete localStorage.savedMsg;
if (localStorage.savedMsg!=undefined) {
// localStorage 에 saveMsg 라는 키값으로 저장된 문자열을 출력하기
document.querySelector("#result").innerText = localStorage.savedMsg;
} else {
document.querySelector("#result").innerText = "저장된 메세지가 없습니다."
}
});
이벤트 리스너를 사용하여 deleBtn 에 click 이벤트가 발생 할 경우 localStorage에 저장되어있는 savedMsg 값을 삭제하고 localStorage에 savedMsg 값을 확인하여 해당 값을 p요소의 innerText으로 출력
실행 화면)
페이지 최초 실행 할 경우 localStorage에 저장된 메세지가 없다고 나옴
input 창에 "안녕" 이라고 입력하고 저장 버튼을 누른 경우 저장된 메세지에 "안녕" 메세지를 innerText으로 출력해줌.
삭제 버튼을 누를 경우 저장된 메세지가 없다고 innerText가 변경됨.
