Ch 05. 클라이언트 측 데이터 저장소

5.1 웹스토리지 웹스토리지란? 쿠키처럼 여러 페이지를 다시 로드해 검색할 수 있도록 이름/값 쌍에 자바스크립트 이용 가능 쿠키처럼 여러 페이지를 다시 로드해 검색할 수 있도록 이름/값 쌍에 자바스크립트 이용 가능 웹스토리지가 쿠키와 다른 점 웹스토리지 데이터는 클라이언트에서 브라우저의 요청이 회선을 통해 서버 에 전송되지 않음 클라이언트 측에 위치하기 때문에 더 많은 데이터를 저장하는데 편리 localStorage와 sessionStorage로 구성 localStorage : 데이터는 창이 닫힌 후에도 저장. 같은 소스(같은 도메인 이름, 프로토콜, 포트)에서 로딩한다면 모든 윈도우(혹은 탭)에서 이용 가능. 애플리케이션 환경설정 등에 유용 sessionStorage : 데이터는 윈도우 오브젝트와 함께 저장. 다른 윈도우/탭은 값을 알 수 없고, 데이터는 윈도우/탭이 닫힐 때 폐기. 활성화 탭 하이라이 트나 테이블 정렬 같은 윈도우 상세 상태에 이용

5.1 웹스토리지 웹스토리지 사용법 값을 설정하는 방법 저장된 값에 접근하는 방법 스토리지로부터 특정 키/값 쌍을 지우는 법 localStorage.setItem('age', 40); 저장된 값에 접근하는 방법 var age = localStorage.getItem('age'); 스토리지로부터 특정 키/값 쌍을 지우는 법 localStorage.removeItem('age'); 키/값 쌍을 전부 지우는 법 localStorage.clear(); 키가 유효한 자바스크립트 토큰(공백, 밑줄 대신 구두점)이라는 가정 하에, 구문을 변경해 사용 localStorage.age = 40 // 나이 값 설정 var age = localStorage.age; // 나이 값 받기 delete localStorage.age; // 스토리지에서 나이 값 지우기

5.1.1 로컬 스토리지에 사용자 설정 저장하기 Settings 패널을 업데이트해 localStorage에 저장하기 Main.Html 파일 jQTouch 생성자를 kilo.js로 옮김 kilo.js 에 Javascript 코드 정리 메인 HTML을 다시 실행해 테스트하여 꼭 확인할 것

5.1.1 로컬 스토리지에 사용자 설정 저장하기 Settings 패널을 업데이트해 localStorage에 저장하기 kilo.js 설정을 저장하는 데 필요한 사항 Settings 폼의 submit 액션을 오버라이드 saveSettings() 사용자 함수로 교체 사용자가 settings 폼을 제출 saveSettings() 함수를 실제 제출된 폼 대신 실행 jQuery의 val() 함수를 이용해 세 가지 폼으로부터 값을 받음 같은 이름의 localStorage 변수에 저장

5.1.1 로컬 스토리지에 사용자 설정 저장하기 kilo.js 수정사항 - localStorage에 세팅 저장 값이 저장되면 패널을 닫고, 이전 페이지로 이동 jQuery의 goBack() 함수(끝에서 두 번째 줄)를 이용 goBack() 함수를 시작하는 submit 이벤트의 기본 행동을 막기 위해 false를 반환 이 코드를 생략하면 현재 페이지는 우리가 원하지 않아도 다시 로드 앱을 띄워 Settings 패널로 이동해 세팅을 입력하고 폼을 제출 localStorage에 세팅 저장 폼이 제출될 때 필드를 비우지 않았으므로 Settings 패널로 돌아왔을 때 도 사용자가 입력한 값이 여전히 남아 있음 localStorage에 값이 저장되지 않더라도 입력된 후에 그대로 남아있음

5.1.1 로컬 스토리지에 사용자 설정 저장하기 kilo.js - loadSettings() 함수로 세팅 로드 loadSettings()는 saveSettings()의 반대 localStorage에 저장된 해당 값에 Settings 폼의 세 필드를 세팅 jQuery의 val()을 이용

5.1.1 로컬 스토리지에 사용자 설정 저장하기 kilo.js - loadSettings() 함수 작동 앱을 실행할 때 작동 시작 부분에서 설정이 로딩된 상태 만약 사용자가 Settings 패널로 이동해 값을 바꾸고 폼에 등록하지 않은 채 취소 버튼을 누르면, 나타날 허점을 방치하는 코드 새롭게 바뀐 값은 저장되지 않은 채로 사용자가 다음에 Settings 패널에 방문할 때까지 남아 있음 사용자가 앱을 닫은 후 다시 연다면, loadSettings() 함수가 시작과 동시에 리프레시 -> 표기된 값은 저장된 값으로 복귀 해결방법은 뷰의 안과 밖에서 Settings 패널로 이동할 때마다 가장 적절한 값이 출력되도록 리프레시해 주는 방법을 추천

5.1.1 로컬 스토리지에 사용자 설정 저장하기 jQTouch를 이용한 함수 연결 Settings 패널의 pageAnimationStart 이벤트에 loadSettings() 함수를 연결할 수 있는 가장 간단한 방법

5.1.1 로컬 스토리지에 사용자 설정 저장하기 kilo.js 전체 코드

5.1.2 세션 스토리지에 선택한 날짜 저장하기 Date패널 세팅 해당 날짜에 입력된 어떤 레코드를 데이터베이스에서 검사 edge-to-edge 리스트로 데이터를 표현하도록 Date 패널을 세팅 Date 패널은 사용자가 Dates 패널에서 누른 날짜를 알아야 함 사용자가 데이터베이스에 항목을 추가하거나 삭제할 수 있도록 Date 패널에 이미 존재하는 + 버튼 Date 패널 항목 템플릿에 Delete 버튼을 추가적으로 지원해야 함

5.1.2 세션 스토리지에 선택한 날짜 저장하기 Date패널 세팅 첫 번째 단계 Dates 패널에서 사용자가 클릭한 아이템을 Date 패널에 알려주는 것 이 정보를 토대로 적절한 날짜 컨텍스트 얻어냄 kilo.js의 문서 준비 함수 수정 사항

5.1.2 세션 스토리지에 선택한 날짜 저장하기 Date패널 세팅 kilo.js의 문서 준비 함수 수정 사항 분석 ➊ jQuery의 click() 함수 Dates 패널에서 링크의 click 이벤트에 하단 자바스크립트 코드 연결 ➋ 클릭된 오브젝트의 ID를 가져온 후 dayOffset 변수에 저장 Dates 패널의 링크는 0~5 사이의 ID 범위를 가짐 클릭된 링크의 ID는 클릭된 날짜를 계산하는 데 필요한 날짜의 수와 일치 (0 days는 오늘, 1 days는 어제, 2 days는 그제 등) ➌ 새로운 자바스크립트 Date 오브젝트를 생성해서 date 변수에 저장 기본적으로 이 날짜는 만들어진 특정 순간으로 설정 다음 줄에서는, getDate() 함수의 결과에서 dayOffset을 뺀 후, 선택된 날짜로 날짜를 변경하기 위해 setDate()를 이용(dayOffset이 0이면 오늘, 1이면 어제 등). ➍ MM/DD/YYYY 형식의 날짜 문자열을 만들어 currentDate로 sessionStorage에 저장

5.1.2 세션 스토리지에 선택한 날짜 저장하기 Date패널 세팅 kilo.js의 문서 준비 함수 수정 사항 분석 ➎ 마지막으로 refreshEntries() 함수를 호출 refreshEntries() 함수의 역할은 Dates 패널에서 사용자가 선택한 날짜를 기준으로 들어오는 Date 패널을 적절히 업데이트 선택 전에는 [그림 5-1]처럼 ‘Date’라는 단어만 볼 수 있음 [그림 5-2]는 refreshEntries() 함수가 동작하는 화면

5.1.2 세션 스토리지에 선택한 날짜 저장하기 Date패널 세팅 kilo.js의 문서 준비 함수 수정 사항 분석 추가할 부분 function refreshEntries() { var currentDate = sessionStorage.currentDate; $('#date h1').text(currentDate); }

5.2 웹 SQL 데이터베이스 웹 SQL 데이터베이스 HTML5에서 제공되는 기능 웹 SQL 데이터베이스 사양은 개발자에게 단순하지만 강력한 자바스크 립트 데이터베이스 API 제공 로컬 SQLite 데이터베이스에 영속적인 데이터를 저장 개발자는 표준 SQL 명령문으로 테이블 생성과 행 입력, 업데이트, 선택, 삭제가 가능 자바스크립트 데이터베이스 API는 트랜잭션도 지원

5.2.1 데이터베이스 생성 kilo.js - 제출된 데이터 저장할 데이터베이스 테이블 설정

5.2.1 데이터베이스 생성 kilo.js 수정사항 분석 ➊ db라는 이름의 전역 변수 선언 테이블을 만들 때 데이터베이스를 연결하기 위한 참조용 모든 장소에서 참조될 수 있기 때문에 전역 변수로 정의 ➋ openDatabase를 호출하기 위해 네 가지 var 정의 shortName : 디스크에서 데이터베이스 파일을 참조하는 문자열 version : 여러분의 데이터베이스 스키마를 변경할 필요가 있을 때, 업그레 이드와 이전 버전과의 호환성을 관리하기 위한 숫자(앱 실행 시 데이터베이 스 버전을 검사해 구버전이면 새로운 데이터베이스로 만들고 데이터 이전) displayName : 사용자 인터페이스에 표시되는 문자열. Ex) 크롬 데스크톱의 개발자 도구(보기 → 개발자 정보 → 개발자 도구)의 Resources 탭에 나타나는 이름 maxSize : 사용자에게 허용할 데이터베이스의 최대 킬로바이트 수 ➌ 매개변수들과 함께 openDatabase를 호출 db 변수에 연결 저장. 데이터베이스가 없으면 생성

5.2.1 데이터베이스 생성 kilo.js 수정사항 분석 ➍ 모든 데이터베이스 질의는 트랜잭션 컨텍스트에서 일어나야 함 먼저 db 오브젝트의 transaction 메소드를 호출해 함수를 시작 나머지 줄은 단일 매개변수로 트랜잭션에 전달되는 함수를 만듦 ➎ 익명 함수를 시작하는 부분으로 이곳에 트랜잭션 오브젝트를 전달 ➏ 함수 안에서 표준 CREATE TABLE 질의 실행 트랜잭션 오브젝트의 executeSql 메소드 호출 IF NOT EXISTS 절은 테이블이 없다면 생성하도록 함

5.2.1 데이터베이스 생성 데스크톱 크롬에 포함된 ‘개발자 도구’ 앱을 실행하면 안드로이드폰에 Kilo라는 데이터베이스 생성 크롬 데스크톱 버전 보기 → 개발자 정보 → 개발자 도구로 이동 Storage 탭을 클릭해 클라이언트단 데이터베이스를 실제로 보고, 조작 가능 기본적으로 현재 브라우저 윈도우 창의 패널로 표시 undock 아이콘 클릭한 화면

5.2.1 데이터베이스 생성 데스크톱 크롬에 포함된 ‘개발자 도구’ 기본적으로 현재 브라우저 윈도우 창의 패널로 표시 클릭된 데이터베이스에 임의의 SQL 질의를 보낼 수 있도록 해주는 인터페 이스

5.2.2 행 삽입하기 행 삽입하기 createEntry() 함수를 만들 때 사용할 몇 가지 항목을 받도록 설정된 데이터베이스 kilo.js에서 문서 준비 함수의 submit 이벤트에 createEntry() 함수 연결 사용자가 #createEntry 폼을 제출하면, createEntry() 함수가 호출됨

5.2.2 행 삽입하기 행 삽입하기 데이터베이스에 레코드 생성

5.2.2 행 삽입하기 행 삽입하기 데이터베이스에 레코드 생성 예제 분석 ➊ SQL 질의를 이용하는 데 필요한 변수 Dates 패널에서 사용자가 선택한 날짜는 sessionStorage.currentDate에 저장 칼로리와 음식은 Settings 폼에서 한 것과 같은 방식으로 이용하기 위해 데이터 항목 폼에 저장 ➋ 데이터베이스 트랜잭션을 열고, executeSql() 호출 실행 executeSql() 메소드는 네 개의 매개변수를 전달 받음 'INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);' 실행을 위한 명령문. ?는 데이터 표시자 [date, calories, food] 데이터베이스에 보내는 값의 배열 이 값은 SQL 명령문의 데이터 표시자인 ? 위치에 들어감 function(){refreshEntries();jQT.goBack();} 이 익명 함수는 SQL 질의가 성공하면 실행 errorHandler - 이 함수는 SQL 질의가 실패하면 실행

5.2.2 행 삽입하기 행 삽입하기 성공적으로 값 삽입 세 번째 매개변수로 전달된 익명 함수가 동작 refreshEntries() 함수를 호출 Cancel 버튼을 누르면 New Entry 패널을 닫은 후 Date 패널 반환 Cancel 버튼은 제출 행동을 취소하지 않으며 실제로는 ‘Cancel’이라는 이름표가 붙은 Back 버튼 실패하면 errorHandler() 함수가 동작 kilo.js에 추가할 내용 function errorHandler(transaction, error) { alert('Oops. Error was '+error.message+' (Code '+error.code+')'); return true; }

5.2.2 행 삽입하기 에러 핸들러 트랜잭션 오브젝트와 에러 오브젝트라는 매개변수 두 개를 전달받음 오브젝트는 에러 코드와 메시지를 사용자에게 알려주는 데에 사용 에러 핸들러는 true나 false를 반환 에러 핸들러가 true를 반환(“Yes, this is a fatal error”라는 문구 출력)할 때 실행 중단 - 모든 트랜잭션 롤백 에러 핸들러가 false를 반환(“No, this is not a fatal error”라는 문구 출력)하 면 계속 실행

5.2.2 행 삽입하기 트랜잭션 오브젝트 매개변수 에러 핸들러에서 executeSql()을 호출해 만들 수 있도록 함 참조할 errors 테이블을 만들지 않았다면 작동하지 않음

5.2.2 행 삽입하기 트랜잭션 오브젝트 매개변수 executeSql() 문을 실행하고 싶다면? 에러 핸들러에서 false로 반환해야 함 true를 반환하면, SQL 명령문을 포함한 모든 트랜잭션 롤백

5.2.3 행을 선택하고 결과 세트를 핸들링하기 refreshEntries() 함수 확장 선택한 날짜에 타이틀바를 설정하는 것 이상의 기능을 하도록 추가 선택한 날짜에 항목을 위해 데이터베이스에 질의하고, 숨겨진 entryTemplate HTML을 이용해 #date ul 요소를 추가 index.html 에 있는 Date 패널의 코드 참조 ➊ 페이지에서 아무것도 보이지 않도록 li의 스타일 속성은 display: none

5.2.3 행을 선택하고 결과 세트를 핸들링하기 refreshEntries() 함수 확장 kilo.js의 기존 refreshEntries() 함수를 교체하도록 함

5.2.3 행을 선택하고 결과 세트를 핸들링하기 refreshEntries() 함수 확장 ➊ sessionStorage의 currentDate 값에 Date 패널의 툴바 타이틀 할당 ➋ 0보다 큰 인덱스의 li 요소를 선택 지우기 위해 jQuery의 gt() 함수를 이용 처음에 li는 0 인덱스를 가진 숨겨진 entryTemplate의 ID와 함께 하나뿐이기 때문에 아무것도 하지 않지만 페이지에 잇따라 방문한 이후에는 데이터베이스에 다시 행을 추가하기 전에 다른 li를 지움 ➌ 데이터베이스 트랜잭션과 executeSql 문 설정 ➍ executeSql 문을 위한 첫 번째 매개변수 데이터 표시자로 동작할 ?를 포함한 간단한 SELECT 문 ➎ 현재 선택한 날짜를 포함하는 단일 요소 배열 SQL 질의에서 ?를 대체

5.2.3 행을 선택하고 결과 세트를 핸들링하기 refreshEntries() 함수 확장 ➏ 이 익명 함수는 성공적인 질의 이벤트에서 호출 transaction과 result라는 매개변수 두 개를 받음 transaction 오브젝트는 에러 핸들러처럼 데이터베이스에 새로운 질의를 보내기 위한 성공 핸들러에서 사용 가능하지만 미사용. result 오브젝트는 세 가지 읽기 전용 속성을 가짐 rowsAffected는 삽입, 업데이트, 삭제 질의의 영향을 받은 행 수 결정 insertId는 삽입 연산에서 만들어진 마지막 행의 주 키를 반환 rows는 발견된 레코드를 가지며 rows 오브젝트는 0부터 그 이상의 row 오브젝트와 다음 줄의 for 루프에서 보이는 length 속성 포함 ➐ row 변수에 현재 행 내용을 지정위해 rows 오브젝트 item() 메소드 이용

5.2.3 행을 선택하고 결과 세트를 핸들링하기 refreshEntries() 함수 확장 ➑ 템플릿 li에 대해 clone() 실행 li에 지정된 id와 style 속성을 삭제 style 속성을 삭제하면 행이 보이게 되므로, id 속성도 반드시 삭제 ➒ row의 id 속성 값을 li 자체에서 데이터로 저장 사용자가 항목을 삭제하고자 할 경우 필요 ➓ 부모 ul 요소에 li 요소를 추가 클래스가 label과 calories로 지정된 li의 자식 span 요소를 Row 오브젝트의 해당 데이터로 업데이트

5.2.3 행을 선택하고 결과 세트를 핸들링하기 Date 패널 실행 예 선택한 날짜에 맞도록 데이터베이스의 각 행마다 li 표시 각 행은 레이블, 칼로리 그리고 Delete 버튼 가짐 [그림 5-5] - CSS를 추가할 필요성 대두

5.2.3 행을 선택하고 결과 세트를 핸들링하기 kilo.css HTML 파일과 같은 디렉터리에 css 저장

5.2.3 행을 선택하고 결과 세트를 핸들링하기 CSS 적용 예 index.html의 head 섹션에 kilo.css 링크 <link type="text/css" rel="stylesheet" media="screen" href="kilo.css"> [그림 5-6] Delete 버튼이 버튼처럼 보이지만 기능은 아직 없음. HTML 페이지에서 상호 작용하는 요소가 아니라 span 태그를 이용한 세팅

5.2.4 행 삭제하기 Delete 버튼을 클릭했을 때 행동 정의 클릭 이벤트 핸들러를 jQuery에 연결 Dates 패널의 아이템과 달리, Date 패널의 항목은 정적이지 않음 사용자 세션의 과정을 통해 추가되거나 제거된다는 뜻 애플리케이션이 실행될 때, Date 패널에 표시되는 항목이 없어 실행 시 click을 연결할 수 없음 해결 방법 refreshEntries() 함수에서 만들어진 delete 버튼에 click 이벤트 연결 이를 위해 for 루프의 끝에 굵은 글꼴로 처리된 줄 추가

5.2.4 행 삭제하기 Delete 버튼을 클릭했을 때 행동 정의 해결 방법 코드 설명 ➊ 날짜 ID를 가진 요소 중 delete 클래스를 가진 것에 click() 메소드 호출 click() 메소드는 이벤트를 처리하기 위해 익명 함수를 단일 매개변수로 받음 ➋ 클릭 핸들러가 시작되면, Delete 버튼의 부모(예: li)가 clickedEntry 변수 에 저장 ➌ refreshEntries() 함수가 만들어질 때 li 요소에 저장한 entryId의 값에 clickedEntryId 변수 세팅 ➍ deleteEntryById() 함수에 클릭된 ID 전달 jQuery의 slideUp() 메소드가 페이지에서 li를 적절하게 삭제

5.2.4 행 삭제하기 Delete 버튼을 클릭했을 때 행동 정의 kilo.js 수정 데이터베이스에서 항목을 지우려면 deleteEntryById() 함수 추가 트랜잭션을 열고, 매개변수 트랜잭션 오브젝트와 콜백 함수 전달 executeSql() 메소드 호출 처음 인자 두 개로 클릭된 레코드의 ID를 SQL 질의에 전달 세 번째 인자는 성공 핸들러 - 필요하지 않으므로 null 네 번째 인자로는 계속 사용해온 에러 핸들러 정의

5.2.4 행 삭제하기 [예제 5-1]

5.2.4 행 삭제하기 [예제 5-1] (2)

5.2.4 행 삭제하기 [예제 5-1] (3)

5.2.4 행 삭제하기 [예제 5-1] (4)

5.2.4 행 삭제하기 [예제 5-1] (5)

5.4 웹 데이터베이스 에러 코드 레퍼런스 SQL 데이터베이스 API의 에러 [표 5-1]에서 볼 수 있는 코드 중 하나를 포함하는 콜백으로 리포트