찾다

집 >웹 프론트엔드 >H5 튜토리얼 >HTML5의 저장 기능과 웹 SQL_html5 튜토리얼 스킬의 관련 조작 방법을 분석합니다.

HTML5의 저장 기능과 웹 SQL_html5 튜토리얼 스킬의 관련 조작 방법을 분석합니다.

WBOY
WBOY원래의
2016-05-16 15:45:551377검색

HTML5는 클라이언트 측에 구조화된 데이터를 저장하고 다음 단점을 극복하기 위해 HTTP 세션 쿠키와 유사한 두 가지 메커니즘을 도입합니다.

쿠키는 모든 HTTP 요청에 포함되어 있으므로 동일한 데이터를 전송하면 웹 애플리케이션 속도가 느려집니다.

모든 HTTP 요청에는 쿠키가 포함되어 있으므로 암호화되지 않은 데이터가 인터넷을 통해 전송됩니다.

쿠키는 제한된 4KB의 데이터만 저장할 수 있어 필요한 데이터를 저장하기에 충분하지 않습니다.
저장 방법에는 세션 저장소와 로컬 저장소 두 가지가 있으며, 이는 다양한 상황을 처리하는 데 사용됩니다.

Internet Explorer를 포함한 거의 모든 최신 브라우저는 HTML5 저장소를 지원합니다.

세션 저장소
_세션 저장소_는 사용자가 단일 트랜잭션을 수행하지만 동시에 여러 창에서 여러 트랜잭션을 수행할 수 있는 시나리오를 위해 설계되었습니다.

예

예를 들어, 사용자가 동일한 웹사이트의 서로 다른 두 창에서 항공권을 구매하는 경우. 웹사이트가 쿠키를 사용하여 사용자가 구매한 티켓을 추적하는 경우, 사용자가 페이지를 클릭할 때 한 창에서 다른 창으로 이동할 때 현재 구매한 티켓이 "유출"되어 사용자가 해당 티켓 2장을 구매하게 될 수 있습니다. 예고도 없이 같은 비행.

HTML5에는 sessionStorage 속성이 도입되었습니다. 이 웹사이트는 세션 저장소에 데이터를 추가하는 데 사용할 수 있습니다. 사용자는 세션이 열려 있는 창에서 계속해서 동일한 사이트의 모든 페이지에 액세스할 수 있습니다. 또한 잃었습니다.

다음 코드는 세션 변수를 설정한 후 해당 변수에 액세스합니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <html>
  3. <몸>
  5. <스크립트 유형="text/ javascript">
  6. if( sessionStorage.hits ){
  7. sessionStorage.hits = 번호(sessionStorage.hits)
  8. }else{
  9. sessionStorage.hits = 1;
    10. }
    11. document.write("총 조회수:" sessionStorage.hits)
  12. 스크립트>
  13. <p>페이지를 새로고침하여 조회수를 늘리세요. p> 
  14. <p>창을 닫았다가 다시 열어서 결과를 확인해보세요. p>
  16. 몸>
  17. html>

로컬 저장소
_로컬 저장소_는 여러 창에 걸쳐 저장되고 현재 세션에서 유지되도록 설계되었습니다. 특히 웹 응용 프로그램은 성능상의 이유로 사용자 또는 사용자의 사서함이 작성한 전체 문서와 같은 수백만 바이트의 사용자 데이터를 클라이언트에 저장하려고 할 수 있습니다.

쿠키는 요청이 있을 때마다 전송되기 때문에 이러한 상황을 잘 처리하지 못합니다.

예

HTML5에서는 이 페이지를 사용할 때마다 시간 제한 없이 페이지의 로컬 저장 영역에 액세스하는 데 사용할 수 있는 localStorage 속성을 도입했습니다.

다음 코드는 이 페이지에 액세스할 때마다, 심지어 다음에 창이 열릴 때에도 액세스할 수 있는 로컬 저장소 변수를 설정합니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >
  2. <html>
  3. <몸>
  5. <스크립트 유형="text/ javascript">
  6. if( localStorage.hits){
  7. localStorage.hits = 숫자(localStorage.hits)
  8. }else{
  9. localStorage.hits = 1;
    10. }
    11. document.write("총 조회수:" localStorage.hits)
  12. 스크립트>
  13. <p>페이지를 새로고침하여 조회수를 늘리세요. p> 
  14. <p>창을 닫았다가 다시 열어서 결과를 확인해보세요. p>
  16. 몸>
  17. html>
위의 개념은 쉽게 배울 수 있습니다. 온라인으로 연습해 보세요.

웹 저장소 삭제

민감한 데이터를 로컬 컴퓨터에 저장하는 것은 위험할 수 있으며 보안 허점을 남길 수 있습니다.
_세션 저장 데이터_는 세션 종료 후 즉시 브라우저에 의해 삭제됩니다.

로컬 저장소 설정을 지우려면 localStorage.remove('key')를 호출해야 합니다. 이 '키'는 제거하려는 값에 해당하는 키입니다. 모든 설정을 지우려면 localStorage.clear() 메서드를 호출해야 합니다.

다음 코드는 로컬 저장소를 완전히 지웁니다.

XML/HTML 코드
클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3. <몸>  
  4.   
  5.   <스크립트 유형="text/ javascript">  
  6.     localStorage.clear();   
  7.   
  8.     // 조회수를 재설정합니다.   
  9.     if( localStorage.hits ){   
  10.        localStorage.hits = 번호(localStorage.hits)  1;   
  11.     }else{   
  12.        localStorage.hits = 1;   
  13.     }   
  14.     document.write("총 조회수 :"   localStorage.hits );   
  15.   스크립트>  
  16.   <p>페이지를 새로고침해도 조회수가 증가하지 않습니다.p>  
  17.   <p>창을 닫았다가 다시 열어 결과를 확인하세요. p>  
  18.   
  19. 몸>  
  20. html>  
심지법
하측면是规范중점심법.也会涵盖재본教程中：
openDatabase: 这个方法使用现有数据库或者new建的数据库创建一个数据库对象.
transaction: 这个方法让我们能够控目一个事务，以及基于这种情况执行提交或者回滚。executeSql ：这个방법은 SQL 查询를 사용합니다.开启数据库

如果数据库已经存재, openDatabase 方法负责开启数据库,如果不存在，这个方法会创建它。

이용자용 하측면의 代码可以创建并开启一个数据库：

JavaScript 코드

复复内容到剪贴板
var
  1.  db = openDatabase('mydb', '1.0', '테스트 DB', 2 * 1024 * 1024);  

    위 메소드는 다음 5개 매개변수를 허용합니다.

    데이터베이스 이름
    버전 번호
    설명 텍스트
    데이터베이스 크기
    생성 콜백
    마지막과 다섯 번째 매개변수인 생성 콜백은 데이터베이스가 생성된 후 호출됩니다. 그러나 이 기능이 없어도 런타임은 계속해서 데이터베이스와 올바른 버전을 생성합니다.

    쿼리 실행
    쿼리를 실행하려면 Database.transaction() 함수를 사용해야 합니다. 이 함수는 아래와 같이 실제로 쿼리 실행을 담당하는 함수인 하나의 매개 변수를 사용합니다.

    JavaScript 코드클립보드에 콘텐츠 복사
    1. var db = openDatabase('mydb', '1.0', '테스트 DB', 2 * 1024 * 1024)
    2. db.transaction(function (tx) {
    3. tx.executeSql('존재하지 않는 경우 테이블 생성(ID 고유, 로그)');
      4. })
    위 쿼리문은 'mydb' 데이터베이스에 LOGS라는 테이블을 생성합니다.

    삽입 작업

    테이블에 항목을 생성하려면 다음과 같이 위의 예에 간단한 SQL 쿼리를 추가합니다.

    JavaScript 코드
    클립보드에 콘텐츠 복사
    1. var db = openDatabase('mydb', '1.0', '테스트 DB', 2 * 1024 * 1024)
      2. db.transaction(
    2. function (tx) {
      3. tx.executeSql(
    3. '존재하지 않는 경우 테이블 생성(ID 고유, 로그)'); tx.executeSql(
      4. 'INSERT INTO LOGS(id, log) VALUES (1, "foobar")'
    4. ); tx.executeSql('INSERT INTO LOGS(id, log) VALUES (2, "logmsg")'
      5. );
    5. })
      6. 항목을 생성할 때 다음과 같은 동적 값을 전달할 수도 있습니다.
      7. JavaScript 코드
    클립보드에 콘텐츠 복사

    var db = openDatabase(
    'mydb'
    1. , '1.0', '테스트 DB', 2 * 1024 * 1024) db.transaction(function (tx) {
    2. tx.executeSql('존재하지 않는 경우 테이블 생성(ID 고유, 로그)');
      3. tx.executeSql(
    3. '로그에 삽입 (id,log) VALUES (?, ?'
    4. ), [e_id, e_log]
      5. })

    5. 여기서 e_id와 e_log는 외부 변수이며, ExecuteSql은 배열 매개변수의 각 항목을 "?"에 매핑합니다.

      읽기 작업
      이미 존재하는 레코드를 읽으려면 콜백을 사용하여 다음과 같이 결과를 캡처할 수 있습니다.

      JavaScript 코드클립보드에 콘텐츠 복사
      1. var db = openDatabase('mydb', '1.0', '테스트 DB', 2 * 1024 * 1024)
      2. db.transaction(function (tx) {
      3. tx.executeSql('존재하지 않는 경우 테이블 생성(ID 고유, 로그)');
        4. tx.executeSql(
      4. 'INSERT INTO LOGS(id, log) VALUES (1, "foobar")'); tx.executeSql(
        5. 'INSERT INTO LOGS(id, log) VALUES (2, "logmsg")'
      5. ); })
        6. db.transaction(
      6. function
        7. (tx) {
      7. tx.executeSql('SELECT * FROM LOGS'
        8. , [],
      8. function (tx, 결과) { var
        9. len = results.rows.length, i;
      9. msg = "

        발견된 행: " len

        10. "

        "
      10. ; document.querySelector('#status').innerHTML = msg;
      11. for (i = 0; i
        12. 경고(results.rows.item(i).log)
      12. }
        13. },
      13. null
        14. );
      14. })
      15. 최종 예마지막으로 이 예를 이와 같은 전체 HTML5 문서에 넣고 Safari에서 실행해 보겠습니다.
      16. JavaScript 코드클립보드에 콘텐츠 복사
      1.   
      2.   
      3. <머리>   
      4. <스크립트 유형="텍스트/자바스크립트">   
      5. var db = openDatabase('mydb', '1.0', '테스트 DB', 2 * 1024 * 1024);   
      6. var msg;   
      7. db.transaction(함수 (tx) {   
      8.   tx.executeSql('존재하지 않는 경우 테이블 생성(ID 고유, 로그)');   
      9.   tx.executeSql('INSERT INTO LOGS(id, log) VALUES(1, "foobar")');   
      10.   tx.executeSql('INSERT INTO LOGS(id, log) VALUES(2, "logmsg")');   
      11.   msg = '

        로그 메시지가 생성되고 행이 삽입되었습니다.

        '        ;   
      12.   document.querySelector('#status').innerHTML =  msg;   
      13. });   
      14.   
      15. db.transaction(함수 (tx) {   
      16.   tx.executeSql('SELECT * FROM LOGS', [], 함수 (tx, 결과) {   
      17.    var len = results.rows.length, i;   
      18.    msg = "

        찾은 행: "   len   "

        "        ;   
      19.    document.querySelector('#status').innerHTML  =  msg;   
      20.     (i = 0; i < len; i ){   
      21.      msg = "

        "   results.rows.item(i).log   "

        "        ;   
      22.      document.querySelector('#status').innerHTML  =  msg;   
      23.    }   
      24.  }, null);   
      25. });   
      26.   
      27.   
      28. <본문>   
      29. "상태" name="상태">상태 메시지
      30.   
      31.   

      지금 浏览器中这会生成如下所示结果：

      复代码
      代码如下:

      로그 메시지가 생성되고 행이 삽입되었습니다.

      찾은 행: 2

      foobar

      logmsg

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML5_html5 튜토리얼 스킬에서 Communication API의 기본 사용법에 대한 자세한 설명다음 기사：HTML5_html5 튜토리얼 스킬에서 Communication API의 기본 사용법에 대한 자세한 설명

관련 기사

더보기