의견 :이 기사는 주로 HTML5 로컬 스토리지의 LocalStorage, Local Database 및 SessionStorage의 간단한 사용 사례를 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
HTML5의 매우 멋진 기능은 이전 쿠키와 유사한 웹 스토리지이지만, 차이점은 웹 스토리지의 로컬 용량이 5 메가 바이트의 저장을 가지고 있으며 쿠키는 4K 만 가지고 있다는 것입니다. 이는 비교할 수없는 장점입니다.
WebStrange는 LocalStorage, SessionStorage 및 로컬 데이터베이스로 더 나뉩니다.
다음으로 하나씩 소개하겠습니다.
1. 현지 스토리지
LocalStorage의 사용은 비교적 간단하며 방법은 다음과 같습니다.
localStorage.setItem (키, 값); // 데이터 저장
localStorage.getItem (키); // 데이터 읽기
localStorage.removeItem (key); // 개별 데이터 삭제
localStorage.clear (); // 모든 데이터를 삭제합니다
키 : localStorage.key (색인); // 특정 인덱스의 값을 얻습니다
기능을 보여주는 작은 데모 :
(기능 ($) {
$ (function () {
$ .fn.getFormParam = function () {
var serializeobj = {};
var array = this.serializearray ();
var str = this.serialize ();
$ (array) .Each (function () {
if (serializeobj [this.name]) {
if ($. isarray (serializeobj [this.name]) {
serializeobj [this.name] .push (this.value);
}또 다른{
serializeobj [this.name] = [serializeobj [this.name], this.value];
}
}또 다른{
serializeobj [this.name] = this.value;
}
});
Serializeobj를 반환합니다.
}; </p> <p> var StorageFile = json.parse (wind
$ .Each (StorageFile, Function (I, Val) {
$ ( '#demoform'). 찾기 ( '[name = "'+i+'"]'). val (val);
}); </p> <p> $ ( '#demoform'). 찾아
var data = $ ( '#demoform'). getformparam ();
window.localstorage.setitem ( 'demo', json.stringify (data));
거짓을 반환합니다.
});
});
}) (jQuery)
HTML 코드 :
<! doctype html>
<html lang = "zh">
<헤드>
<meta charset = "utf-8">
<script src = "jquery-1.10.2.min.js"> </script>
<script src = "demo.js"> </script>
<title> 문서 </title>
</head>
<body>
<양식>
<p> <label> <span> 이름 </span> <입력> </label> </p>
<p> <label> <span> age </span> <입력> </label> </p>
<p> <label> <span> 학생 번호 </span> <input> </label> </p>
<p> <label> <span> 주소 </span> <입력> </label> </p>
<p> <label> <span> 취미 </span> <input> </label> </p>
<p> <label> <span> 기타 </span> <TextArea cols = "30"rows = "10"> </textarea> </label> </p>
<p> <입력 유형 = "제출"값 = "제출"> </p>
</form>
</body>
</html>
이런 식으로 LocalStorage를 보여주는 간단한 데모가 구현됩니다.
2. 세션 스터리지
SessionStorage의 사용은 LocalStorage의 사용과 동일하지만 브라우저가 웹 사이트를 닫으면 SessionStorage가 지워지고 LocalStorage는 브라우저에 저장되며 둘 다 적절하게 함께 사용됩니다.
3. 로컬 데이터베이스
iOS/Android 개발에 익숙한 학생들은 SQLITE 데이터베이스에 더 익숙해야합니다.
HTML5에서 데이터베이스의 작동은 주로 OpenDatabase 방법과 트랜잭션 방법을 포함하여 비교적 간단합니다.
객체 DB를 사용하여 OpenDatabase가 생성 한 개체를 수신하여 데이터베이스에 액세스하십시오.
var db = opendatabase (databaseName, 버전, 설명, 크기)
~에
DatabaseName : 데이터베이스 이름
버전 : 데이터베이스 버전은 무시할 수 있습니다
설명 : 데이터베이스 설명
크기 : 데이터베이스는 공간 크기를 할당했습니다
트랜잭션 메소드는 콜백 함수를 매개 변수로 사용하여 기능의 데이터베이스에 액세스하기 위해 특정 메소드를 실행합니다.
db.Transaction (function (tx)) {
tx.executesql (sqlquery, [value1, value2 ..], Datahandler, ErrorHandler)
});
ExecutesQL 메소드의 4 가지 매개 변수는 다음과 같습니다.
SQLQUERY : 구체적으로 실행 해야하는 SQL 문을 작성하려면 || select || 업데이트 || 삭제;
[value1, value2 ..] : SQL 문에 사용 된 모든 매개 변수의 배열. ExecutesQL 메소드에서 SQL 문에 사용될 매개 변수는 먼저?로 대체 된 다음이 매개 변수는 배열로 구성되어 두 번째 매개 변수에 배치됩니다.
Datahandler : 성공적인 콜백 함수를 실행합니다.
ErrorHandler : 콜백 함수가 실행되지 않았습니다.