HTML5 ที่เก็บข้อมูลท้องถิ่น

Web Storage เป็นคุณสมบัติที่สำคัญมากที่แนะนำโดย HTML5

การจัดเก็บเว็บแบ่งออกเป็นสองประเภท:

• StsessionStorage
• orlocalstorage

สามารถมองเห็นได้อย่างชัดเจนจากความหมายที่แท้จริง

ไม่ว่าจะเป็น SessionStorage หรือ LocalStorage, APIs ที่สามารถใช้งานได้เหมือนกัน

• C บันทึกข้อมูล: localstorage.setItem (คีย์, ค่า);
• C อ่านข้อมูล: localstorage.getItem (คีย์);
• ： ลบข้อมูลเดียว: localstorage.removeitem (คีย์);
• l ลบข้อมูลทั้งหมด: localstorage.clear ();
• 索กุญแจสำคัญในการรับดัชนีบางอย่าง: localstorage.key (ดัชนี);

ตามที่กล่าวมาทั้งสองและค่าจะต้องเป็นสตริง

ต่อไปเราพัฒนาโปรแกรมที่อยู่ง่าย ๆ ผ่านการจัดเก็บเว็บเพื่อแสดงให้เห็นถึงการใช้ API ที่เกี่ยวข้อง

1. ป้อนผู้ติดต่อผู้ติดต่อมีสองฟิลด์หมายเลขโทรศัพท์มือถือและหมายเลขโทรศัพท์มือถือถูกใช้เป็น keystorage เป็น keystorage;

2. ค้นหาเจ้าของตามหมายเลขโทรศัพท์มือถือ

3. แสดงรายการข้อมูลการติดต่อทั้งหมดที่เก็บรักษาไว้ในปัจจุบัน

ก่อนอื่นเตรียมหน้า HTML ง่าย ๆ ดังนี้:

 <! ความกว้าง: 320px; : </label> <ประเภทอินพุต = ข้อความข้อความ = ชื่อ mobilephone = mobilephone/> <br/> <ประเภทอินพุต = ปุ่ม onClick = save () value = new Record/<hr/> <label for = searc = searc h_phone> ป้อนหมายเลขโทรศัพท์มือถือ: </label> <input type = text id = search_phone name = search_phone/> <input type = ปุ่ม onclick = find () value = ค้นหาเจ้าของเครื่อง/> <p id = find_result> <br <// > </p> </div> <br/> <div id = list> </div> </body> </html>

อินเทอร์เฟซแสดงสิ่งต่อไปนี้:

เพื่อให้บรรลุการเก็บรักษาผู้ติดต่อคุณจะต้องใช้วิธี JS ต่อไปนี้เท่านั้น:

 // บันทึกฟังก์ชั่นข้อมูลบันทึก () {var microlephone = document.getElementById (mobilephone)

เพื่อให้บรรลุเจ้าของผู้ก่อตั้งวิธีการ JS ต่อไปนี้จะถูกนำไปใช้:

 // ค้นหาฟังก์ชั่นข้อมูล () {var search_phone = document.getElementById (search_phone)

ในการแสดงข้อมูลการติดต่อที่บันทึกไว้ทั้งหมดคุณต้องใช้วิธีการ localstorage.key (ดัชนี) ดังต่อไปนี้:

 // แยกวัตถุทั้งหมดที่เก็บไว้ใน localstorage และแสดงฟังก์ชั่น loadall () {var list = document.getElementById (รายการ); <l> <td> ชื่อ </td> <td> หมายเลขมือถือ </td> </tr>; i); ชื่อ var = localstorage.getItem (mobilephone); .innerhtml = ผลลัพธ์;} else {list.innerhtml = ข้อมูลปัจจุบันว่างเปล่ารีบเข้าร่วมผู้ติดต่อ;}}

เอฟเฟกต์มีดังนี้:

คำถาม: การสาธิตข้างต้นมีเพียงสองฟิลด์ชื่อและหมายเลขโทรศัพท์มือถือ การจัดเก็บเว็บไม่ได้ประมวลผลสตริงเท่านั้นหรือ ในเวลานี้คุณสามารถใช้เมธอด stringify () ของ JSON เพื่อแปลงวัตถุที่ซับซ้อนเป็นสตริงและจัดเก็บไว้ในที่เก็บข้อมูลเว็บ

การสาธิตอย่างง่ายต่อไปนี้เพิ่มรายชื่อผู้ติดต่อของคุณลักษณะของ บริษัท เพื่อบันทึกรหัส JS:

 // บันทึกฟังก์ชั่นข้อมูล () {var = วัตถุใหม่; json.stringify (ติดต่อ); GetElementById (รายการ); ถ้า (localstorage.length> 0) {var result = <table border = '1'>; > <td> <td> <td> โทรศัพท์มือถือ </td> <td> บริษัท </td> </tr>; localstorage.key (i); > <td>+conf tact.Company+</td> </tr>;} ผลลัพธ์+= </table>; ผู้ติดต่อ;}}

เอฟเฟกต์มีดังนี้:

ด้านบนเป็นที่เก็บของ HTML5 ที่ได้รับการแนะนำโดย Xiaobian ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!