소메뉴

메인메뉴

2017.06.25 Sunday 옥창원은 살아있다

팁&테크


HTML5에서는 데이터 저장 관련하여 몇가지 기능을 추가 제공한다.

  • localStorage
  • sessionStorage
  • client-side DB

localStorage

  • 웹브라우저를 종료해도 데이터가 남는다.
  • 동일한 소스(도메인, 프로토콜, 포트)로부터 데이터를 쓸 수 있다.
  • 웹 애플리케이션에 유용
  • 예)
    • 키/값 저장
      • localStorage.setItem( ‘gilbird’, 2010);
    • 키/값 로드
      • var year = localStorage.getItem( ‘gilbird’);
    • 키/값 모두 삭제
      • localStorage.clear();

sessionStorage

  • 데이터는 윈도우 객체에 저장
  • 해당 윈도우만 인식
  • 예)
    • 위 localStorage 예에서 sessionStorage라고 바꿔 쓸 수 있음

Client-Side DB

  • 자바스크립트 DB API
  • INSERT, UPDATE, SELECT, DELETE 지원
  • 트랜젝션 지원
  • DB 접속
    • db = openDatabase( shortName, version, displayName, maxSize);
      • 사파리의 경우 maxSize를 5MB 기본 지원(용량초과시 5MB 추가됨 - 확인필요)
      • 브라우저 설정에서 로컬 DB 크기를 볼 수 있음
  • DB 생성
    • db.transaction(
          function(transaction) {
              transaction.executeSql(
                  'CREATE TABLE IF NOT EXISTS 테이블명 (컬럼_리스트);'
              );
          }
      );
  • INSERT
    • db.transaction(
          function(transaction) {
              transaction.executeSql(
                  'INSERT INTO 테이블명 (컬럼_리스트) VALUES (?);',
                  [값_리스트],
                  function() {
                        // INSERT후 실행문
                                    },
                                    transactionErrorHandler,       // SQL 실패시 실행
                                    transactionSuccessHandler  // SQL 성공시 실행
                                ); } );
                      • 에러 처리
                        • function transactionErrorHandler( transaction, error) {
                              alert( error.message + “:” + error.code);
                              return true;
                          }
                        • 리턴값
                          • true ? 치명적 오류. 진행 중단
                          • false ? 계속 진행
                      • SELECT
                        • db.transaction(
                              function(transaction) {
                                  transaction.executeSql(
                                      'SELECT * FROM 테이블명 WHERE 컬럼=?;',
                          •    [값_리스트],
                               function( transaction, result) {
                                     for (var i=0; i < result.rows.length; i++) {
                                         var row = result.rows.item(i);
                                         // row 처리
                                     }
                                                 },
                                                 transactionErrorHandler,       // SQL 실패시 실행
                                                 transactionSuccessHandler  // SQL 성공시 실행
                                              ); } );
                                        • DELETE
                                          • db.transaction(
                                                 function(transaction) {
                                                     transaction.executeSql('DELETE FROM 테이블명 WHERE id=?;',
                                                     [값], null, transactionErrorHandler);
                                                  }
                                            )

                                        http://itlab.tistory.com/28

                                        List of Articles
                                        번호 제목 글쓴이 날짜 조회 수
                                        30 이클립스 PHP + SVN [1] [1622] Lepas 2012-02-22 167966
                                        29 [HTML5] Server-Sent-Event(SSE) 사용하기 [1961] Lepas 2011-12-14 158403
                                        28 스프링3 프레임워크 강좌 블로그 [3450] Lepas 2011-06-21 230355
                                        27 자바 소켓 서버 base - example source [3407] Lepas 2010-12-30 294921
                                        26 우분투에서 웹서버 환경 구축하기 (LAMP or APM) [1922] Lepas 2010-10-07 197681
                                        25 유용한 css 선택자 [3141] Lepas 2010-09-08 268195
                                        24 HTML5의 모든것 file [2269] Lepas 2010-09-03 168382
                                        23 [모바일웹] 아이폰 사파리에서 화면회전시 폰트 확대 방지 image [2468] Lepas 2010-08-18 219906
                                        22 float을 clear하는 4가지 방법. image [1776] Lepas 2010-08-13 164912
                                        21 패킷 캡쳐 프로그램 Fiddler [2208] Lepas 2010-07-30 214540
                                        20 소스 비교 분석 프로그램 WinMerge [1988] Lepas 2010-07-24 181869
                                        19 UIWebView와 APP간의 통신(communication [2919] Lepas 2010-06-03 359649
                                        18 HTML5의 소개 및 지원되는 않는 브라우져에서의 사용법 (5 - Local Storage(like cookie), Web Worker(Thread)) [1922] Lepas 2010-06-02 171216
                                        » [HTML5] localStorage와 sessionStorage 그리고 클라이언트 DB [2439] Lepas 2010-06-02 201474
                                        16 EditArea - Textarea 구문강조 [1965] Lepas 2010-03-12 177523
                                        15 iPhone Web 제작용 iui [1953] Lepas 2010-02-11 186684
                                        14 JQuery Library [2090] Lepas 2010-02-05 210921
                                        13 jQuery 개발자를 위한 메모 - 레퍼런스 [3631] Lepas 2010-02-02 156524
                                        12 jQuery 개발자를 위한 메모 - 기본·샘플 [1742] Lepas 2010-02-02 156842
                                        11 The Objective-C Programming Language 한글 번역본 file [2974] Lepas 2010-01-24 204080