■ Storage 인터페이스를 사용해 로컬 저장소의 데이터를 처리하는 방법을 보여준다.
▶ test.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script language="javascript"> function saveData() { localStorage.name = 'html5'; localStorage['phone'] = '012-3456-7890'; localStorage.setItem('email', 'someone@html5.com'); document.getElementById('output').innerHTML = '로컬 저장소에 데이터가 저장되었습니다.'; } function loadData() { message = '이름 : ' + localStorage['name'] + '<br />'; message = message + '전화 : ' + localStorage.getItem('phone') + '<br />'; message = message + '이메일 : ' + localStorage.email; document.getElementById('output').innerHTML = message; } function clearData() { localStorage.clear(); document.getElementById('output').innerHTML = '로컬 저장소의 데이터가 모두 제거되었습니다.'; } </script> </head> <body> <div id="output">로컬 저장소 테스트입니다.</div> <p /> <input type="button" value="저장하기" onclick="saveData();" /> <input type="button" value="로드하기" onclick="loadData();" /> <input type="button" value="지우기" onclick="clearData();" /> </body> </html> |