5 개의 HTML 5 의 상용 로 컬 저장 방식 에 대한 상세 한 설명 과 소개

7771 단어 HTML5로 컬 저장 소sessionstorageapplicationcacheWeb
HTML 5 규범 이전에 저장 소 는 주로 cookies 를 사용 합 니 다.그러나 cookies 도 단점 이 있 습 니 다.
요청 헤더 에 데이터 가 져 오기;
크기 는 4k 이내 입 니 다.
주 도 메 인 오염;
cookies 의 주요 응용:카 트,고객 로그 인.
이렇게 많은 결점 이 존재 하기 때문에 우 리 는 다음 과 같은 문 제 를 해결 해 야 한다.
4k 의 크기 문제 해결 하기;
요청 헤더 에 정 보 를 저장 하 는 문 제 를 해결 합 니 다.
관계 형 저장 문제 해결 하기;
크로스 브 라 우 저;
HTML 5 의 5 가지 저장 방식
1.로 컬 저장 소 localstorage
저장 방식:
수 동 으로 삭제 하지 않 는 한 키 쌍(Key-Value)으로 저장 하고 영구적 으로 저장 합 니 다.
크기:도 메 인 이름 당 5M.
지원 상황:

메모:IE9 localStorage 는 로 컬 파일 을 지원 하지 않 습 니 다.서버 에 프로젝트 를 배치 해 야 지원 할 수 있 습 니 다!
검사 방법:

if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}
상용 API:
기록 가 져 오기:getItem;
설정 기록:setIten;
기록 제거:removeItem;
key 에 대응 하 는 값 가 져 오기:key;
기록 지우 기:clear;

저 장 된 내용:
배열,그림,json,스타일,스 크 립 트...(문자열 로 정렬 할 수 있 는 내용 이 라면 모두 저장 할 수 있다.
2.로 컬 저장 세 션 저장 소
HTML 5 의 로 컬 저장 API 의 localStorage 는 sessionStorage 와 사용 방법 이 같 습 니 다.sessionStorage 는 페이지 를 닫 은 후에 비 워 지 는 것 과 달리 localStorage 는 계속 저 장 됩 니 다.
3.오프라인 캐 시 애플 리 케 이 션 cache
로 컬 캐 시 응용 에 필요 한 파일 입 니 다.
사용 방법:
매 니 페스트 파일 설정 필요

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Manifest 파일:
manifest 파일 은 간단 한 텍스트 파일 로 브 라 우 저가 캐 시 된 내용(캐 시 되 지 않 은 내용)을 알려 줍 니 다.
manifest 파일 은 세 부분 으로 나 눌 수 있 습 니 다.
1.1 CACHE MANIFEST-이 제목 아래 에 있 는 파일 은 첫 번 째 다운로드 후 캐 시 됩 니 다.
1.2 NETWORK-이 제목 아래 에 있 는 파일 은 서버 와 연결 되 어야 하 며 캐 시 되 지 않 습 니 다.
1.3 FALLBACK-이 제목 아래 에 있 는 파일 은 페이지 에 접근 할 수 없 을 때 반환 페이지(예:404 페이지)를 규정 합 니 다.
전체 demo:

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js

NETWORK:
login.jsp

FALLBACK:
/html/ /offline.html
서버 상:
manifest 파일 은 올 바른 MIME-type,즉"text/cache-manifest"를 설정 해 야 합 니 다.
톰 캣 처럼:

<mime-mapping>
  <extension>manifest</extension>
  <mime-type>text/cache-manifest</mime-type>
</mime-mapping>
상용 API:
핵심 은 applicationCache 대상 입 니 다.status 속성 이 있 습 니 다.캐 시 를 사용 하 는 현재 상 태 를 표시 합 니 다.
0(UNCACHED):캐 시 없 음,페이지 와 관련 된 응용 캐 시 없 음
1(IDLE):유 휴,즉 캐 시가 업데이트 되 지 않 았 습 니 다.
2(CHECKING):검사 중 설명 파일 을 다운로드 하고 업 데 이 트 를 확인 하 는 중 입 니 다.
3(DOWNLOADING):다운로드 중,즉 캐 시 를 사용 하여 설명 파일 에서 지정 한 자원 을 다운로드 하고 있 습 니 다.
4(UPDATEREADY):업데이트 완료,모든 자원 다운로드 완료
5(IDLE):캐 시 를 사용 하 는 설명 파일 이 존재 하지 않 기 때문에 페이지 에서 캐 시 에 접근 할 수 없습니다.
관련 이벤트:
캐 시 상태의 변 화 를 표시 합 니 다.
checking:브 라 우 저가 캐 시 를 사용 하기 위해 업 데 이 트 를 찾 을 때 터치 합 니 다
error:업데이트 나 다운로드 자원 을 검사 하 는 동안 오류 가 발생 했 을 때 발생 합 니 다.
noupdate:설명 파일 을 검사 하 다가 파일 이 변 하지 않 았 을 때 터치 합 니 다.
downloading:캐 시 자원 을 다운로드 하기 시작 할 때 터치 합 니 다.
progress:파일 다운로드 캐 시 를 사용 하 는 과정 에서 계속 다운로드 하여 실행 합 니 다.
updateready:페이지 의 새로운 응용 캐 시 다운로드 가 완료 되 었 습 니 다.
cached:캐 시 를 사용 할 때 실행 합 니 다.
Application Cache 의 세 가지 장점:
① 오프라인 탐색
② 페이지 불 러 오 는 속도 향상
③ 서버 압력 감소
주의사항:
1.캐 시 데이터 에 대한 브 라 우 저의 용량 제한 이 다 를 수 있 습 니 다(일부 브 라 우 저 설정 의 제한 은 사이트 당 5MB 입 니 다)
2.manifest 파일 이나 내부 에 열 거 된 파일 을 제대로 다운로드 하지 못 하면 전체 업데이트 과정 이 실패 로 간주 되 고 브 라 우 저 는 오래된 캐 시 를 계속 사용 합 니 다.
3.manifest 를 참조 하 는 html 는 manifest 파일 과 원본 이 같 아야 합 니 다.같은 필드 에서
4.브 라 우 저 는 manifest 파일 의 HTML 파일 을 자동 으로 캐 시 합 니 다.이 로 인해 HTML 내용 을 바 꾸 면 버 전 을 업데이트 해 야 업데이트 할 수 있 습 니 다.
5.manifest 파일 에서 CACHE 는 NETWORK,FALLBACK 의 위치 순서 와 관계 가 없습니다.암시 적 성명 이 라면 맨 앞 에 있어 야 합 니 다.
6.FALLBACK 의 자원 은 manifest 파일 과 원본 이 같 아야 합 니 다.
7.버 전 업 데 이 트 를 마 친 후 한 번 새로 고침 을 해 야 새 버 전 을 시작 할 수 있 습 니 다(페이지 를 다시 칠 하 는 경우 가 발생 합 니 다).감청 버 전 이 벤트 를 추가 해 야 합 니 다.
8.사이트 의 다른 페이지 는 manifest 속성 이 설정 되 어 있 지 않 더 라 도 요청 한 자원 이 캐 시 에 있 으 면 캐 시 에서 접근 합 니 다.
9.manifest 파일 이 바 뀌 었 을 때 자원 요청 자체 도 업 데 이 트 를 촉발 합 니 다.
오프라인 캐 시 와 전통 브 라 우 저 캐 시 차이 점:
오프라인 캐 시 는 전체 응용 프로그램 을 대상 으로 하고 브 라 우 저 캐 시 는 하나의 파일 입 니 다.
오프라인 캐 시 가 끊 겼 습 니 다.페이지 를 열 수 있 습 니 다.브 라 우 저 캐 시 는 안 됩 니 다.
오프라인 캐 시 는 브 라 우 저 에 자원 업 데 이 트 를 주동 적 으로 알 릴 수 있 습 니 다.
4. Web SQL
관계 데이터베이스,SQL 문 구 를 통 해 접근 합 니 다.
웹 SQL 데이터베이스 API 는 HTML 5 규범 의 일부분 이 아니 지만 독립 된 규범 으로 SQL 을 사용 하여 클 라 이언 트 데이터 베 이 스 를 조작 하 는 API 를 도입 했다.
지원 상황:
웹 SQL 데이터 베 이 스 는 최신 버 전의 Safari,Chrome,Opera 브 라 우 저 에서 작업 할 수 있 습 니 다.
핵심 방법:
① openDatabase:이 방법 은 기 존의 데이터 베 이 스 를 사용 하거나 새로 만 든 데이터 베 이 스 를 사용 하여 데이터 베 이 스 를 만 듭 니 다.
② transaction:이 방법 은 우리 로 하여 금 하나의 사 무 를 통제 하고 이런 상황 을 바탕 으로 제출 하거나 스크롤 백 을 수행 할 수 있 게 합 니 다.
③ execute Sql:이 방법 은 실제 SQL 조 회 를 수행 하 는 데 사 용 됩 니 다.
데이터베이스 열기:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
// openDatabase()          
//    ：     、   、    、     、
조회 동작 실행:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) { 
 tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
});
데이터 삽입:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
 tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
 tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
 tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});
데이터 읽 기:

db.transaction(function (tx) {
 tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
var len = results.rows.length, i;
  msg = "<p>      : " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
   alert(results.rows.item(i).name );
  }

 }, null);
});
이러한 조작 을 통 해 알 수 있 듯 이 기본적으로 SQL 문 구 를 이용 하여 데이터 베 이 스 를 조작 하 는 것 입 니 다.만약 에 MySQL 을 할 줄 안다 면 이것 은 비교적 쉽게 사용 할 수 있 을 것 입 니 다.
5. IndexedDB
색인 데이터베이스(IndexedDB)API(HTML 5 의 일부로 서)는 로 컬 저장 데이터 가 풍부 한 데이터 집약 형 오프라인 HTML 5 웹 응용 프로그램 을 만 드 는 데 유용 하 다.
또한 로 컬 캐 시 데 이 터 를 통 해 전통 적 인 온라인 웹 프로그램(예 를 들 어 모 바 일 웹 프로그램)이 더욱 빨리 실행 되 고 응답 할 수 있 도록 도 와 줍 니 다.
비동기 API:
IndexedDB 에서 대부분의 작업 은 우리 가 자주 사용 하 는 호출 방법 이 아니 라 결 과 를 되 돌려 주 는 모델 이 아니 라 요청-응답 하 는 모델 입 니 다.예 를 들 어 데이터 베 이 스 를 여 는 작업 입 니 다.

이렇게 해서 우리 가 데이터 베 이 스 를 열 었 을 때 실질 적 으로 DB 대상 을 되 돌려 주 었 고 이 대상 은 result 에 있 었 다.
위의 그림 에서 알 수 있 듯 이 result 를 제외 하고.또 몇 가지 중요 한 속성 은 onerror,onsuccess,onupgradeneeded 입 니 다.
이것 은 우리 의 ajax 요청 과 유사 합 니 다.우 리 는 이 요 구 를 한 후에 그것 이 언제 성공 할 것 인 지 를 확정 할 수 없 기 때문에 리 셋 에서 논 리 를 처리 해 야 한다.
닫 기 및 삭제:

function closeDB(db){
  db.close();
}function deleteDB(name){
  indexedDB.deleteDatabase(name);
}
데이터 저장 소:
indexedDB 에는 표 의 개념 이 없 는 object Store 입 니 다.하나의 데이터 베 이 스 는 여러 개의 object Store 를 포함 할 수 있 고 object Store 는 유연 한 데이터 구조 로 다양한 유형의 데 이 터 를 저장 할 수 있 습 니 다.
즉,하나의 object Store 는 표 한 장 에 해당 하 며,그 안에 저 장 된 모든 데 이 터 는 하나의 키 와 연결 되 어 있다.
모든 기록 에 있 는 지정 한 필드 를 키 값(keyPath)으로 사용 할 수도 있 고,자동 으로 생 성 된 증가 숫자 를 키 값(keyGenerator)으로 사용 할 수도 있 으 며,지정 하지 않 을 수도 있 습 니 다.
선택 키 의 유형 에 따라 object Store 가 저장 할 수 있 는 데이터 구조 도 차이 가 있 습 니 다.
HTML 5 로 컬 저장 방식 에 관 한 더 많은 글 은 아래 의 관련 글 을 클릭 하 십시오.
CSS 코드 검사 도구 stylelint 의 사용 방법 에 대한 상세 한 설명
CSS 수직 거 중 을 완벽 하 게 실현 하 는 11 가지 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage