HTML5는 클라이언트 측에 구조화된 데이터를 저장하고 다음 단점을 극복하기 위해 HTTP 세션 쿠키와 유사한 두 가지 메커니즘을 도입합니다.
쿠키는 모든 HTTP 요청에 포함되어 있으므로 동일한 데이터를 전송하면 웹 애플리케이션 속도가 느려집니다.
모든 HTTP 요청에는 쿠키가 포함되어 있으므로 암호화되지 않은 데이터가 인터넷을 통해 전송됩니다.
쿠키는 제한된 4KB의 데이터만 저장할 수 있어 필요한 데이터를 저장하기에 충분하지 않습니다.
저장 방법에는 세션 저장소와 로컬 저장소 두 가지가 있으며, 이는 다양한 상황을 처리하는 데 사용됩니다.
Internet Explorer를 포함한 거의 모든 최신 브라우저는 HTML5 저장소를 지원합니다.
세션 저장소
_세션 저장소_는 사용자가 단일 트랜잭션을 수행하지만 동시에 여러 창에서 여러 트랜잭션을 수행할 수 있는 시나리오를 위해 설계되었습니다.
예
예를 들어, 사용자가 동일한 웹사이트의 서로 다른 두 창에서 항공권을 구매하는 경우. 웹사이트가 쿠키를 사용하여 사용자가 구매한 티켓을 추적하는 경우, 사용자가 페이지를 클릭할 때 한 창에서 다른 창으로 이동할 때 현재 구매한 티켓이 "유출"되어 사용자가 해당 티켓 2장을 구매하게 될 수 있습니다. 예고도 없이 같은 비행.
HTML5에는 sessionStorage 속성이 도입되었습니다. 이 웹사이트는 세션 저장소에 데이터를 추가하는 데 사용할 수 있습니다. 사용자는 세션이 열려 있는 창에서 계속해서 동일한 사이트의 모든 페이지에 액세스할 수 있습니다. 또한 잃었습니다.
다음 코드는 세션 변수를 설정한 후 해당 변수에 액세스합니다.
XML/HTML 코드클립보드에 콘텐츠 복사
- >
-
<html>
-
<몸>
-
-
<스크립트 유형="text/ javascript">
- if( sessionStorage.hits ){
-
sessionStorage.hits = 번호(sessionStorage.hits)
- }else{
-
sessionStorage.hits = 1;
} -
document.write("총 조회수:" sessionStorage.hits) -
-
스크립트>
-
<p>페이지를 새로고침하여 조회수를 늘리세요. p>
-
<p>창을 닫았다가 다시 열어서 결과를 확인해보세요. p>
-
-
몸>
-
html>
로컬 저장소
_로컬 저장소_는 여러 창에 걸쳐 저장되고 현재 세션에서 유지되도록 설계되었습니다. 특히 웹 응용 프로그램은 성능상의 이유로 사용자 또는 사용자의 사서함이 작성한 전체 문서와 같은 수백만 바이트의 사용자 데이터를 클라이언트에 저장하려고 할 수 있습니다.
쿠키는 요청이 있을 때마다 전송되기 때문에 이러한 상황을 잘 처리하지 못합니다.
예
HTML5에서는 이 페이지를 사용할 때마다 시간 제한 없이 페이지의 로컬 저장 영역에 액세스하는 데 사용할 수 있는 localStorage 속성을 도입했습니다.
다음 코드는 이 페이지에 액세스할 때마다, 심지어 다음에 창이 열릴 때에도 액세스할 수 있는 로컬 저장소 변수를 설정합니다.
XML/HTML 코드클립보드에 콘텐츠 복사
- >
-
<html>
-
<몸>
-
-
<스크립트 유형="text/ javascript">
- if( localStorage.hits){
-
localStorage.hits = 숫자(localStorage.hits)
- }else{
-
localStorage.hits = 1;
} -
document.write("총 조회수:" localStorage.hits) -
-
스크립트>
-
<p>페이지를 새로고침하여 조회수를 늘리세요. p>
-
<p>창을 닫았다가 다시 열어서 결과를 확인해보세요. p>
-
-
몸>
-
html>
위의 개념은 쉽게 배울 수 있습니다. 온라인으로 연습해 보세요.
웹 저장소 삭제
민감한 데이터를 로컬 컴퓨터에 저장하는 것은 위험할 수 있으며 보안 허점을 남길 수 있습니다.
_세션 저장 데이터_는 세션 종료 후 즉시 브라우저에 의해 삭제됩니다.
로컬 저장소 설정을 지우려면 localStorage.remove('key')를 호출해야 합니다. 이 '키'는 제거하려는 값에 해당하는 키입니다. 모든 설정을 지우려면 localStorage.clear() 메서드를 호출해야 합니다.
다음 코드는 로컬 저장소를 완전히 지웁니다.
XML/HTML 코드
클립보드에 콘텐츠 복사
- >
-
<html>
-
<몸>
-
-
<스크립트 유형="text/ javascript">
- localStorage.clear();
-
- // 조회수를 재설정합니다.
- if( localStorage.hits ){
-
localStorage.hits = 번호(localStorage.hits) 1;
- }else{
-
localStorage.hits = 1;
- }
- document.write("총 조회수 :" localStorage.hits );
-
스크립트>
-
<p>페이지를 새로고침해도 조회수가 증가하지 않습니다.p>
-
<p>창을 닫았다가 다시 열어 결과를 확인하세요. p>
-
-
몸>
-
html>
심지법
하측면是规范중점심법.也会涵盖재본教程中：
openDatabase: 这个方法使用现有数据库或者new建的数据库创建一个数据库对象.
transaction: 这个方法让我们能够控目一个事务，以及基于这种情况执行提交或者回滚。executeSql ：这个방법은 SQL 查询를 사용합니다.开启数据库
如果数据库已经存재, openDatabase 方法负责开启数据库,如果不存在，这个方法会创建它。
이용자용 하측면의 代码可以创建并开启一个数据库：
JavaScript 코드
复复内容到剪贴板
var
- db = openDatabase('mydb', '1.0', '테스트 DB', 2 * 1024 * 1024);
위 메소드는 다음 5개 매개변수를 허용합니다.
데이터베이스 이름
버전 번호
설명 텍스트
데이터베이스 크기
생성 콜백
마지막과 다섯 번째 매개변수인 생성 콜백은 데이터베이스가 생성된 후 호출됩니다. 그러나 이 기능이 없어도 런타임은 계속해서 데이터베이스와 올바른 버전을 생성합니다.
쿼리 실행
쿼리를 실행하려면 Database.transaction() 함수를 사용해야 합니다. 이 함수는 아래와 같이 실제로 쿼리 실행을 담당하는 함수인 하나의 매개 변수를 사용합니다.
JavaScript 코드클립보드에 콘텐츠 복사
- var db = openDatabase('mydb', '1.0', '테스트 DB', 2 * 1024 * 1024)
-
db.transaction(function (tx) {
-
tx.executeSql('존재하지 않는 경우 테이블 생성(ID 고유, 로그)');
}) -
위 쿼리문은 'mydb' 데이터베이스에 LOGS라는 테이블을 생성합니다.
삽입 작업테이블에 항목을 생성하려면 다음과 같이 위의 예에 간단한 SQL 쿼리를 추가합니다.
JavaScript 코드
클립보드에 콘텐츠 복사
- var db = openDatabase('mydb', '1.0', '테스트 DB', 2 * 1024 * 1024)
db.transaction(-
function (tx) {
tx.executeSql(-
'존재하지 않는 경우 테이블 생성(ID 고유, 로그)');
tx.executeSql(
'INSERT INTO LOGS(id, log) VALUES (1, "foobar")'-
);
tx.executeSql('INSERT INTO LOGS(id, log) VALUES (2, "logmsg")'
);
-
})
항목을 생성할 때 다음과 같은 동적 값을 전달할 수도 있습니다. -
JavaScript 코드
클립보드에 콘텐츠 복사
var db = openDatabase(
'mydb'
- , '1.0', '테스트 DB', 2 * 1024 * 1024)
db.transaction(function (tx) {
-
tx.executeSql('존재하지 않는 경우 테이블 생성(ID 고유, 로그)');
tx.executeSql(-
'로그에 삽입
(id,log) VALUES (?, ?'
- ), [e_id, e_log]
}) -
여기서 e_id와 e_log는 외부 변수이며, ExecuteSql은 배열 매개변수의 각 항목을 "?"에 매핑합니다.
읽기 작업
이미 존재하는 레코드를 읽으려면 콜백을 사용하여 다음과 같이 결과를 캡처할 수 있습니다.
JavaScript 코드클립보드에 콘텐츠 복사
- var db = openDatabase('mydb', '1.0', '테스트 DB', 2 * 1024 * 1024)
-
db.transaction(function (tx) {
-
tx.executeSql('존재하지 않는 경우 테이블 생성(ID 고유, 로그)');
tx.executeSql(-
'INSERT INTO LOGS(id, log) VALUES (1, "foobar")');
tx.executeSql(
'INSERT INTO LOGS(id, log) VALUES (2, "logmsg")'-
);
})
db.transaction(- function
(tx) { -
tx.executeSql('SELECT * FROM LOGS'
, [], -
function (tx, 결과) {
var
len = results.rows.length, i;
-
msg = "
발견된 행: "
len
""-
;
document.querySelector('#status').innerHTML = msg;
-
for (i = 0; i
경고(results.rows.item(i).log) -
}
}, - null
);
- })
-
최종 예마지막으로 이 예를 이와 같은 전체 HTML5 문서에 넣고 Safari에서 실행해 보겠습니다.
- JavaScript 코드클립보드에 콘텐츠 복사
-
-
- <머리>
- <스크립트 유형="텍스트/자바스크립트">
-
var db = openDatabase('mydb', '1.0', '테스트 DB', 2 * 1024 * 1024);
-
var msg;
-
db.transaction(함수 (tx) {
-
tx.executeSql('존재하지 않는 경우 테이블 생성(ID 고유, 로그)');
-
tx.executeSql('INSERT INTO LOGS(id, log) VALUES(1, "foobar")');
-
tx.executeSql('INSERT INTO LOGS(id, log) VALUES(2, "logmsg")');
-
msg = '
로그 메시지가 생성되고 행이 삽입되었습니다.
';
-
document.querySelector('#status').innerHTML = msg;
- });
-
-
db.transaction(함수 (tx) {
-
tx.executeSql('SELECT * FROM LOGS', [], 함수 (tx, 결과) {
-
var len = results.rows.length, i;
-
msg = "
찾은 행: "
len "";
-
document.querySelector('#status').innerHTML = msg;
-
(i = 0; i < len; i ){
-
msg = "
"
results.rows.item(i).log "";
-
document.querySelector('#status').innerHTML = msg;
- }
-
}, null);
- });
-
-
- <본문>
- "상태" name="상태">상태 메시지
