HTML 5 로 컬 저장 소 초기 분석

원문 주소: http://www.qianduan.net/local-storage-of-html5.html
Robin 2011 년 1 월 5 일 에 발표 되 었 습 니 다.
ShowCase ,
18 개 댓 글 »
태그:
HTML5

 html 5 가 우리 에 게 준 것 은 더 많은 의미 가 풍부 한 라벨 뿐만 아니 라 더 많은 강력 한 특성 도 있다. 예 를 들 어 '오프라인 저장' 이다.데스크 톱 컴퓨터 로 서 는 놀 라 움 을 주지 않 았 지만 모 바 일 기기 로 서 는 오프라인 저장 이 기적 이다.오프라인 저장 브 라 우 저 를 지원 하 는 모든 모 바 일 장치, 예 를 들 어 아이 폰, 아 이 팟 터치, 오프라인 저장 소 는 웹 전단 엔지니어 가 쉽게 응용 프로그램 을 개발 할 수 있 도록 합 니 다. 
 앞에서 한 단락 허풍 을 떨 었 지만, 솔직히 html 5 로 컬 저장 소 는 현재 로 서 는 제한 을 받 고 있 습 니 다.첫째, 브 라 우 저 제한, 현재 Safari 3.1 and later, and in iPhone OS 2.0 and later. javascript database 원생 지원 을 제 공 했 지만 Taffy DB 곡선 으로 나 라 를 구 할 수 있다.(아직 사용 해 본 적 이 없어 서 함부로 결론 을 내리 지 못 한다.)둘째, 서버 쪽 에서 설정 을 수정 해 야 합 니 다. 단 이 자신의 서버 라면 간단 합 니 다. 
 다음은 간단 한 오프라인 웹 앱 - note 북 을 예 로 들 어 아이 폰 / ipod touch 를 위해 웹 앱 을 개발 하 는 과정 을 기록 합 니 다.경험 이 아니 라 초보 자 입 니 다.

아이 폰 / 아이 폰 터치 에 적합 한 UI 만 들 기
데이터 의 로 컬 저장 소
파일 의 로 컬 저장 소
이 앱 보완 (이 를 보완 할 생각 은 없습니다. 아이 폰 웹 앱 개발 을 전문 적 으로 소개 하 는 실 용적 인 앱 을 만 들 시간 이 있 습 니 다)

우선, 아이 폰 / ipod touch 에 적합 한 UI 는 본문의 중점 이 아니 며, 관심 있 는 학생 은 여기 로 옮 겨. 。여기 서 한 가지 만 강조 합 니 다. 당신 이 기본적으로 만 든 페이지 는 아이 폰 에 놓 으 면 좁 아 지고 글자 가 작 아 집 니 다.이것 은 아이 폰 이 320 px 너비 의 화면 으로 기본 980 px 너비 의 페이지 를 표시 하기 때문에 당신 의 내용 이 비례 에 따라 축소 되 었 기 때 문 입 니 다.이 문 제 를 해결 하려 면 html 의 head 구역 에 meta 표 시 를 추가 하면 구체 적 인 문법 은 보 세 요 여기, 이곳. 。 바로 이렇다.
 이 문 제 를 해결 한 후에 우 리 는 html 5 와 css 3 를 마음대로 사용 하여 인터페이스 를 만 들 수 있 습 니 다. (설비 개발 에 대해 호환성 을 고려 하지 않 아 도 되 고 정말 시원 합 니 다.) 
 나 는 대략 못 생 긴 화면 을 만 들 었 다.

html 코드 ， CSS 코드 (사실 안 봐 도 돼 요. 마지막 에 포장 코드 가 있어 요) 
 UI 가 완성 되면 데 이 터 를 처리 해 야 합 니 다. 
 "데이터" 의 로 컬 저장 소 를 시작 하기 전에 client - side database storage API: 에 대해 알 아 보 겠 습 니 다.

the client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with – SQL.－－webkit blog

현재 webkit 핵심 브 라 우 저 만 이 기능 을 지원 합 니 다.w3c html 5 작업 초안 에서 (cs - db) client - side database 에 대한 상세 한 설명 을 찾 을 수 없습니다. 
 우선 데이터베이스 링크 를 만 들 려 고 합 니 다:

try {

	if(!window.openDatabase){  //         cs-db

		alert('not supported cs-db!');

	} else {

		var shortName = 'noteDB';

		var version = '1.0';

		var displayName = 'Note book database';

		var maxSize = 65536;

                //       

		var db = openDatabase(shortName,version,displayName,maxSize);

	}

} catch(e){  //      

	if (e == 2){

		alert('Invalid database version.');

	} else {

		alert("Unknown error "+e+".");

	}

}

상기 코드 가 틀 리 지 않 으 면 safair 또는 chrome 개발 자 도구 에서 이 데이터 베 이 스 를 볼 수 있 습 니 다: 
 오른쪽 구역 에서 sql 조 회 를 직접 실행 할 수 있 지만, 나 는 항상 "의외 의 오류 발생" 0 "을 얻 습 니 다. 이러한 결 과 는 RP 의 문제 인지 아 닌 지 모 르 겠 습 니 다. 
 다음은 표를 만 들 고 sql 문 구 를 실행 하여 추가 삭제 검 사 를 하 는 것 입 니 다. 
 js 실행 sql 의 기본 문법 은 대체로 다음 과 같 습 니 다:

db.transaction(

	function (transaction){

		transaction.executeSql(sqlquery,[],dataHandler, errorHandler);

	}

);

그 중에서 transaction. execute Sql 의 매개 변 수 는 sql 조회 문자열 로 sql 조회 에 전 달 된 매개 변수, 데이터 처리 핸들, 오류 처리 핸들 입 니 다.그 중 첫 번 째 항목 만 필수 이 고 나머지 는 모두 선택 할 수 있 습 니 다. 
 두 번 째 매개 변수의 용법 은 대체로 다음 과 같다.

transaction.executeSql("UPDATE people set age=? where name=?;",[ age, name ]);

검색 문자열 의 "?" 는 다음 배열 의 변수 로 순서대로 대 체 됩 니 다. 
 주의: 이상 저 는 '대체적으로' 라 는 단 어 를 사 용 했 습 니 다. 왜냐하면 은 공식 문서 가 없 기 때 문 입 니 다 W3C-web database 다른 문헌 과 자신 이 판단 할 수 있 을 뿐 잘못 이 있 으 면 지적 해 주 십시오. 
 다음 에 note 를 저장 할 시 계 를 만 듭 니 다:

db.transaction(

	function (transaction){

		transaction.executeSql(

                'CREATE TABLE IF NOT EXISTS notes (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,titel TEXT, note TEXT NOT NULL, date DATE);',errorHandler);

	}

);

error Handler 는 다음 과 같 습 니 다:

function errorHandler(transaction, error){

	alert('Error was: '+ error.message +'(Code:'+ error.code +')');



	var fatal_error = true;

	if(fatal_error){

		return true;

	}

	return false;

}

error. message 는 오류 설명 입 니 다. error. code 는 오류 코드 상세 한 상황 입 니 다.
 다시 보기 db 에서 데 이 터 를 검색 하여 페이지 에 표시 하면:

db.transaction(

	function (transaction){

		transaction.executeSql("SELECT * from notes;",[],dataHandler, errorHandler);

	}

);



function dataHandler(transaction, results){

	var string = "";

	for (var i = 0; i" + row['titel'] + "



";

	}

	var listConts = $('listCont');

	listConts.innerHTML = string;

}

는 기본적으로 php 와 같은 백 엔 드 언어 조작 과 대동소이 함 을 알 수 있 습 니 다.
더 많은 코드 는 예제 프로그램 을 볼 수 있 고 일일이 나열 하지 않 습 니 다. 
 데이터 의 로 컬 저장 을 완 료 했 으 니 파일 저장 도 해 야 합 니 다.html 5 는 파일 의 로 컬 저장 을 실현 하기 위해 manifest 라 는 파일 을 만 들 었 습 니 다. 이 파일 은 캐 시 목록 입 니 다. 클 라 이언 트 에 캐 시 할 파일 을 브 라 우 저 에 알려 줍 니 다.manifest 는 mimetype 이 text / cache - manifest 인 일반 텍스트 파일 입 니 다.주의해 라, 이 점 은 매우 중요 하 다.p>
 다음은 manifest 파일 의 예 입 니 다: 
 NETWORK, CACHE, FALLBACK 은 모두 선택 할 수 있 습 니 다. 
 manifest 파일 은 CACHE MANIFEST 로 시작 해 야 합 니 다 
 그 다음 에 다운로드 하고 캐 시 해 야 할 파일 은 상대 적 이거 나 절대적 인 경 로 를 사용 할 수 있 습 니 다. 모든 자원 줄 이 가능 합 니 다. 
 NETWORK 세그먼트 는 온라인 자원 이 있 는 도 메 인 을 표시 합 니 다. 이 도 메 인 에 있 는 모든 자원 은 캐 시 되 지 않 습 니 다. 클 라 이언 트 가 오프라인 상태 에 있 더 라 도 이 도 메 인 에 기반 한 자원 을 요청 하려 고 합 니 다. 
 CACHE 단 은 아직 잘 모 르 겠 어 요. 
 FALLBACK 세그먼트 아래 줄 마다 두 부분 을 포함 하고 빈 칸 으로 구분 합 니 다.후반 부 는 현재 부분 경로 가 접근 할 수 없 을 때의 예비 경로 입 니 다. 위의 그림 과 같이 demodeimages 디 렉 터 리 가 접근 할 수 없 을 때 images 디 렉 터 리 에 접근 하려 고 시도 합 니 다. 
 manifest 파일 소 개 는 여기까지 입 니 다. 다음은 우리 자신의 manifest 파일 을 만 듭 니 다: 
 우 리 는 두 개의 파일 만 캐 시 하면 됩 니 다. nbStyle. css 와 nbScript. js.그리고 index. html 자 체 는 manifest 파일 이 기본 캐 시 에서 자신의 파일 을 참조 하기 때문에 index. html 는 캐 시 목록 에 쓸 수 없습니다.

CACHE MANIFEST

# version: 2010-01-20 22:30



nbStyle.css

nbScript.js

는 이렇게 간단 합 니 다. 우 리 는 그 를 notebook. manifest 파일 로 저장 하고 다른 파일 과 함께 루트 디 렉 터 리 에 놓 습 니 다. 
 마지막 질문 입 니 다. notebook. manifest 의 mimetype 을 text / cache - manifest 형식 으로 표시 하면 요?나 는 두 가지 방법 이 있다 는 것 을 안다. 
 1. 사이트 루트 디 렉 터 리 에 htaccess 파일 을 만 듭 니 다. 그 중에서. manifest 의 mimetype 을 설명 합 니 다. 이것 은 서버 설정 파일 을 수정 해 야 합 니 다. 시도 하지 못 했 습 니 다. 
 2. php 환경 은 apache 디 렉 터 리 에서 "mime. types" 라 는 프로필 을 찾 고 마지막 줄 에 추가 합 니 다:

text/cache-manifest            manifest

그리고 index. html 파일 에서 그것 을 인용 합 니 다. 이 물건 들 을 해결 하면 웹 키 트 로 응용 프로그램 에 접근 한 다음 오프라인 으로 사용 해 보 세 요. 프로그램 도 평소 대로 실 행 될 수 있 을 것 입 니 다. 
 이로써 html 5 의 오프라인 저장 소 는 기본적으로 소개 되 었 습 니 다. 아래 에 포 장 된 코드 를 동봉 합 니 다. 코드 자체 가 어렵 지 않 습 니 다. 다만 제 가 너무 못 썼 습 니 다.

코드 다운로드

사실 아직 끝나 지 않 았 습 니 다. 캐 시 된 파일 이 업데이트 되면 어떻게 합 니까?클 라 이언 트 에 게 캐 시 업 데 이 트 를 알 리 는 방법 도 api 가 있 습 니 다. 천천히 탐색 하 세 요.html 5 와 관련 된 문 제 를 토론 하 기 를 기대 합 니 다. 
 완

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[HTML5]01.기본 구조

수업에서 자바를 상속, 인터페이스 예외처리 등 얼추 다 나가고 이제 html을 배우기 시작했습니다. html은 해본적이 거의 없기에 열심히 배우고 매일 수업 때 배운걸 적어둘려고 합니다. HTML5 문서의 기본 구조...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

HTML 5 로 컬 저장 소 초기 분석

좋은 웹페이지 즐겨찾기