웹 프론트엔드 H5 튜토리얼 HTML5의 Web SQL 학습 요약

HTML5의 Web SQL 학습 요약

Nov 13, 2018 am 09:35 AM
html5

이 글의 내용은 HTML5의 Web Sql 학습 요약을 소개하여 Web Sql 관련 지식을 어느 정도 이해할 수 있도록 하는 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

웹 시스템이나 애플리케이션에서는 일부 데이터를 로컬에 저장해야 하는 경우가 많습니다. 클라이언트에 데이터를 저장하는 가장 빠른 방법은 쿠키였습니다(물론 쿠키는 주로 사용자의 상태를 저장하는 데 사용됩니다. 로컬 데이터를 저장할 수 있습니다. 라이브) 실제로는 클라이언트의 로컬 데이터를 저장하는 데 적합하지 않습니다.

1 서버를 요청할 때마다 불필요한 트래픽 소비가 증가합니다. 서버에 요청하면 서버와 대화합니다. 쿠키가 서버로 전송됩니다.

2. 쿠키 데이터에 데이터를 저장하는 규칙은 사용하기 쉽지 않으며 구조도 충분히 명확하지 않습니다.

3. 가장 중요한 점은 쿠키의 저장 용량이 매우 작다는 것입니다. 각 쿠키의 길이는 4kb를 초과할 수 없으며, 가장 먼저 저장된 쿠키 데이터가 잘리므로 이는 분명히 충분하지 않습니다.

HTML5의 개발과 함께 localStorage와 sessionStorage가 나중에 등장했습니다:

localStorage: 페이지를 다시 입력하는 데 시간이 걸리거나 페이지가 있는 사이트에 관계없이 영구 저장소(clearI를 사용하여 삭제할 수 있음) 또는 RemoveItem 메소드) 저장된 데이터를 얻을 수 있습니다.

sessionStorage: 임시 저장 공간으로 페이지를 닫으면 저장된 데이터가 자동으로 지워집니다.

실제로 자신의 프로젝트를 작업하거나 개발할 때 이 두 개체가 가장 많이 사용됩니다. 적어도 현재 이 두 개체는 여전히 대부분의 프로젝트의 로컬 저장소 요구 사항을 충족할 수 있습니다. 로컬 저장소 데이터가 여전히 너무 단순합니다.

주로 요약하자면,

HTML5의 새로운 API->Web Sql 로컬 데이터베이스 기술, Web Sql 데이터베이스 API는 실제로 HTML5 사양의 구성 요소가 아니라 독립적인 사양이며 사용할 수 있습니다. SQL 언어의 기본적으로 일관된 구문을 사용하면 로컬 데이터베이스의 추가, 삭제, 수정 및 검색이 가능하므로 백엔드 개발 경험이 있는 개발자도 쉽게 시작할 수 있습니다. (HTML5가 Web Sql 데이터베이스 데이터베이스를 포기했다는 점을 지적해야 합니다. 및 본 사양의 사양 작업이 중단되었습니다.) 그럼에도 불구하고 대부분의 브라우저에서 기본적으로 지원됩니다. 이제 그 사용법을 소개하겠습니다.

WebSql 데이터베이스 만들기:

openDatabase(数据库名,数据库版本号,描述,数据库大小,数据库创建成功的回调);
var mydb = openDatabase('myTeatDatabase',1,'this a Web Sql Database',1024*1024,function(){
     //数据库创建成功的回调,可省略
});
로그인 후 복사

참고: 이 메서드는 생성된 데이터베이스가 이미 존재하는 경우 데이터베이스를 직접 엽니다.

트랜잭션 생성:

mydb.transaction(function(tx){
    //该方法有一个事务对象参数供使用,该对象上有一系列为数据库增删改查的方法。
});
로그인 후 복사

작업 수행:

tx.executeSql(执行数据库操作的sql语句,参数,数据库操作执行成功的回调,数据库操作执行失败的回调);
로그인 후 복사

특정 데이터베이스 작업:

데이터 테이블 생성:

tx.executeSql('create table if not exists table1 (id unique,name)', [], function(tx, result) { 
	//成功回调
	},function(error){
         //失败回调
	});
로그인 후 복사

참고: 이 진술은 다음을 의미합니다. table1 데이터 테이블을 생성합니다. 이 테이블이 데이터베이스에 존재하지 않는 경우 "존재하지 않는 경우"가 문에 추가되지 않으면 생성하려는 데이터 테이블이 데이터베이스에 이미 존재하는 경우 오류가 보고됩니다.

데이터 테이블 삭제:

tx.exexcteSql('drop table table1',[],function(tx,result){
      //删除成功时的回调
      },function(error){ 
         //删除失败时的回调
      });
로그인 후 복사

데이터 테이블에 데이터 추가:

tx.executeSql('insert into table1 (id,name) values (1,'小明')',[],function(tx,result){
            //添加数据成功时的回调
            },function(error){
                  //添加数据失败时的回调
            });
로그인 후 복사

데이터 테이블에서 하나 이상의 데이터 삭제:

tx.executeSql('delete from table1 where id=1',[],function(tx,result){
//删除成功时的回调
},function(error){
    //删除失败时的回调
});
로그인 후 복사

또는:

tx.executeSql('delete from table1 where id=?',[1],function(tx,result){
//删除成功时的回调
},function(error){
    //删除失败时的回调
});
로그인 후 복사

Update 데이터베이스 테이블의 데이터 조각:    

tx.executeSql('updata table1 set name="小红" where id=1',[],function(tx,result){
   //数据更新成功时的回调
   },function(error){
       //数据更新失败时的回调
   });
로그인 후 복사

쿼리 조건을 충족하는 데이터 쿼리:  

tx.executeSql('select * from table',[],function(tx,result){
//查询成功时的回调
},function(error){
  //查询失败时的回调
});
로그인 후 복사

참고: 쿼리가 성공하면 쿼리에서 반환된 데이터를 행을 통해 사용할 수 있습니다. 콜백 함수의 결과 매개변수 속성입니다.

이 예제는 가장 간단한 쿼리 문일 뿐입니다. 더 복잡한 쿼리가 필요한 경우 sql 문을 참조하세요.

요약:

사실 이 데이터베이스 API는 비교적 간단합니다. 모든 추가, 삭제, 수정 및 쿼리는 트랜잭션을 생성하고 트랜잭션 개체에 대한 모든 작업을 수행해야 합니다. 전체 데이터베이스 삭제를 지원하지 않지만 유사한 효과를 얻기 위해 해당 데이터베이스의 모든 데이터 테이블을 삭제하여 데이터베이스를 지울 수 있습니다.

위 내용은 HTML5의 Web SQL 학습 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML에서 텍스트 이동 HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML 온클릭 버튼 HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles