ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำตัวอย่างการใช้งานง่าย ๆ ของ LocalStorage ฐานข้อมูลท้องถิ่นและ SessionStorage ใน HTML5 Local Storage เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
คุณสมบัติที่ยอดเยี่ยมมากของ HTML5 คือการจัดเก็บเว็บคล้ายกับคุกกี้ก่อนหน้า แต่ความแตกต่างคือการจัดเก็บเว็บมีความจุท้องถิ่น 5 เมกะไบต์ในการจัดเก็บในขณะที่คุกกี้มีเพียง 4K ซึ่งเป็นข้อได้เปรียบที่ไม่สามารถเปรียบเทียบได้
WebStrange แบ่งออกเป็น: LocalStorage, SessionStorage และฐานข้อมูลท้องถิ่น
ต่อไปฉันจะแนะนำทีละคน:
1. ท้องถิ่น
การใช้งาน LocalStorage นั้นค่อนข้างง่ายและวิธีการคือ:
localstorage.setItem (คีย์, ค่า); // บันทึกข้อมูล
localstorage.getItem (คีย์); // อ่านข้อมูล
localstorage.removeitem (คีย์); // ลบข้อมูลส่วนบุคคล
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 (window.localstorage.getItem ('demo'));
$ .Each (StorageFile, function (i, val) {
$ ('#demoform') ค้นหา ('[name = "'+i+'"]'). val (val);
}); </p> <p> $ ('#demoform') ค้นหา ('[type = "ส่ง"]'). on ('คลิก', function () {
var data = $ ('#demoform'). getFormParam ();
window.localstorage.setItem ('สาธิต', json.stringify (data));
กลับเท็จ;
-
-
}) (jQuery)
รหัส HTML:
<! doctype html>
<html lang = "zh">
<head>
<meta charset = "utf-8">
<script src = "jQuery-1.10.2.min.js"> </script>
<script src = "demo.js"> </script>
<title> เอกสาร </title>
</head>
<body>
<form>
<p> <label> <span> ชื่อ </span> <put> </label> </p>
<p> <label> <pan> อายุ </span> <put> </label> </p>
<p> <label> <span> หมายเลขนักเรียน </span> <put> </label> </p>
<p> <label> <span> ที่อยู่ </span> <put> </label> </p>
<p> <lable> <pan> งานอดิเรก </span> <put> </label> </p>
<p> <label> <pan> อื่น ๆ </span> <textarea cols = "30" rows = "10"> </textarea> </label> </p>
<p> <อินพุตประเภท = "ส่ง" value = "ส่ง"> </p>
</form>
</body>
</html>
ด้วยวิธีนี้การสาธิตอย่างง่ายที่แสดงการจัดเก็บข้อมูลท้องถิ่นจะถูกนำไปใช้
2. SessionStorage
การใช้งาน SessionStorage นั้นเหมือนกับของ LocalStorage แต่ SessionStorage จะถูกล้างเมื่อเบราว์เซอร์ปิดเว็บไซต์และ LocalStorage จะถูกบันทึกลงในเบราว์เซอร์และทั้งคู่จะถูกใช้ร่วมกันตามความเหมาะสม
3. ฐานข้อมูลท้องถิ่น
นักเรียนที่คุ้นเคยกับการพัฒนา iOS/Android ควรคุ้นเคยกับฐานข้อมูล SQLite มากขึ้น
การทำงานของฐานข้อมูลใน HTML5 นั้นค่อนข้างง่ายส่วนใหญ่รวมถึงวิธี opendatabase และวิธีการทำธุรกรรม
ใช้วัตถุ db เพื่อรับวัตถุที่สร้างโดย opendatabase เพื่อเข้าถึงฐานข้อมูล
var db = opendatabase (databasename, เวอร์ชัน, คำอธิบาย, ขนาด)
ใน
Databasename: ชื่อฐานข้อมูล
เวอร์ชัน: สามารถละเว้นเวอร์ชันฐานข้อมูลได้
คำอธิบาย: คำอธิบายฐานข้อมูล
ขนาด: ขนาดพื้นที่ที่จัดสรรฐานข้อมูล
วิธีการทำธุรกรรมใช้ฟังก์ชันการเรียกกลับเป็นพารามิเตอร์เพื่อดำเนินการวิธีการเฉพาะเพื่อเข้าถึงฐานข้อมูลในฟังก์ชัน
db.transaction (ฟังก์ชั่น (tx)) {
tx.executesql (sqlQuery, [value1, value2 .. ], datahandler, errorhandler)
-
พารามิเตอร์สี่ตัวของวิธีการดำเนินการ QL คือ:
SQLQuery: คำสั่ง SQL ที่จำเป็นต้องดำเนินการโดยเฉพาะสร้าง || เลือก || อัปเดต || ลบ;
[ค่า 1, ค่า 2 .. ]: อาร์เรย์ของพารามิเตอร์ทั้งหมดที่ใช้ในคำสั่ง SQL ในเมธอด ExecutesQl พารามิเตอร์ที่จะใช้ในคำสั่ง SQL จะถูกแทนที่ด้วยก่อนหรือไม่จากนั้นพารามิเตอร์เหล่านี้จะประกอบด้วยอาร์เรย์ในทางกลับกันและวางไว้ในพารามิเตอร์ที่สอง
Datahandler: เรียกใช้ฟังก์ชั่นการโทรกลับที่ประสบความสำเร็จ;
ErrorNhandler: ฟังก์ชั่นการโทรกลับไม่สามารถดำเนินการ;