การจัดเก็บเว็บเป็นฟังก์ชั่นที่สำคัญมากที่แนะนำโดย HTML5 มันสามารถจัดเก็บข้อมูลในเครื่องทางด้านไคลเอนต์ มันคล้ายกับคุกกี้ HTML4 แต่สามารถใช้ฟังก์ชั่นที่ทรงพลังกว่าคุกกี้ได้มาก ขนาดของคุกกี้ถูก จำกัด ไว้ที่ 4KB Web Storage Official แนะนำ 5MB ต่อเว็บไซต์
การจัดเก็บเว็บแบ่งออกเป็นสองประเภท :SessionStorage
การจัดเก็บพื้นที่ท้องถิ่น
มันสามารถเห็นได้อย่างชัดเจนจากความหมายตามตัวอักษรที่ SessionStorage บันทึกข้อมูลในเซสชันและเบราว์เซอร์ปิด; LocalStorage เก็บข้อมูลไว้ในไคลเอนต์
ไม่ว่าจะเป็น SessionStorage หรือ LocalStorage API ที่สามารถใช้งานได้นั้นเหมือนกัน สิ่งที่ใช้กันทั่วไปมีดังนี้ (นำการจัดเก็บข้อมูลท้องถิ่นเป็นตัวอย่าง):
บันทึกข้อมูล: localstorage.setItem (คีย์, ค่า);
อ่านข้อมูล: localstorage.getItem (คีย์);
ลบข้อมูลส่วนบุคคล: localstorage.removeitem (คีย์);
ลบข้อมูลทั้งหมด: localstorage.clear ();
รับกุญแจของดัชนีที่แน่นอน: localstorage.key (ดัชนี);
ดังที่ได้กล่าวมาแล้วทั้งคีย์และค่าจะต้องเป็นสตริง กล่าวอีกนัยหนึ่ง Web Storage API สามารถจัดการกับสตริงได้เท่านั้น
ต่อไปเราพัฒนาแอปเพล็ตสมุดที่อยู่ง่าย ๆ ผ่านการจัดเก็บเว็บเพื่อสาธิตวิธีการใช้ API ที่เกี่ยวข้อง เราต้องการใช้ฟังก์ชั่นต่อไปนี้:
ป้อนผู้ติดต่อ ผู้ติดต่อมีสองฟิลด์: ชื่อและหมายเลขโทรศัพท์มือถือและใช้หมายเลขโทรศัพท์มือถือเป็นกุญแจสำคัญในการจัดเก็บใน localStorage;
ค้นหาเจ้าของตามหมายเลขโทรศัพท์มือถือ
แสดงรายการข้อมูลการติดต่อทั้งหมดที่บันทึกไว้ในปัจจุบัน
ก่อนอื่นเตรียมหน้า HTML ง่าย ๆ ดังนี้ :<! doctype html>
<html>
<head>
<meta charset = "utf-8"/>
<title> บทความโฮลตี้โฮลโลชั่นโฮส
</head>
<body>
<div style = "ชายแดน: 2px ประ #CCC; ความกว้าง: 320PX; TEXT-ALIGING: CENTRE;">
<label for = "user_name"> ชื่อ: </lable>
<input type = "text" id = "user_name" name = "user_name"/>>>
<br/>
<label for = "mobilephone"> โทรศัพท์มือถือ: </lable>
<อินพุต type = "text" id = "mobilephone" name = "mobilephone"/>>>
<br/>
<อินพุต type = "ปุ่ม" onclick = "save ()" value = "เพิ่มระเบียน"/>>
<HR/>
<label for = "search_phone"> ป้อนหมายเลขโทรศัพท์มือถือ: </lable>
<input type = "text" id = "search_phone" name = "search_phone"/>>
<อินพุต type = "ปุ่ม" onclick = "find ()" value = "ค้นหาเจ้าของ"/>>>
<p id = "find_result"> <br/> </p>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
อินเทอร์เฟซจะแสดงดังนี้ :ในการบันทึกผู้ติดต่อคุณจะต้องใช้วิธี JS ต่อไปนี้เท่านั้น:
// บันทึกข้อมูล
ฟังก์ชั่นบันทึก () {
var mobilephone = document.getElementById ("mobilephone") ค่า;
var user_name = document.getElementById ("user_name"). ค่า;
localstorage.setItem (Mobilephone, user_name);
-
ในการใช้งานเจ้าของการค้นหาวิธีการ JS ต่อไปนี้จะถูกนำไปใช้ :// ค้นหาข้อมูล
ฟังก์ชั่นค้นหา () {
var search_phone = document.getElementById ("search_phone") ค่า;
ชื่อ var = localstorage.getItem (search_phone);
var find_result = document.getElementById ("find_result");
เจ้าของ find_result.innerhtml = search_phone + "คือ:" + ชื่อ;
-
ในการแสดงข้อมูลการติดต่อที่บันทึกไว้ทั้งหมดคุณต้องใช้วิธีการ localstorage.key (ดัชนี) ดังนี้:
// แยกวัตถุทั้งหมดที่เก็บไว้ใน LocalStorage และแสดงบนอินเตอร์เฟส
ฟังก์ชั่น loadall () {
var list = document.getElementById ("รายการ");
if (localstorage.length> 0) {
var result = "<table border = '1'>";
ผลลัพธ์ += "<tr> <td> ชื่อ </td> <td> หมายเลขโทรศัพท์มือถือ </td> </tr>";
สำหรับ (var i = 0; i <localstorage.length; i ++) {
var mobilephone = localstorage.key (i);
ชื่อ var = localstorage.getItem (mobilephone);
ผลลัพธ์+= "<tr> <td>"+ชื่อ+"</td> <td>"+mobilephone+"</td> </tr>";
-
ผลลัพธ์ += "</bable>";
list.innerhtml = ผลลัพธ์;
}อื่น{
list.innerhtml = "ข้อมูลว่างเปล่าในขณะนี้รีบเร่งและเริ่มเพิ่มผู้ติดต่อ";
-
-
ผลกระทบมีดังนี้:
คำถาม: ดังที่ได้กล่าวมาแล้วมีเพียง 2 ฟิลด์ชื่อและหมายเลขโทรศัพท์มือถือ หากคุณต้องการฝากข้อมูลการติดต่อที่สมบูรณ์ยิ่งขึ้นเช่นชื่อ บริษัท ที่อยู่บ้าน ฯลฯ วิธีการบรรลุเป้าหมาย Web Storage ไม่สามารถประมวลผลสตริงได้หรือไม่? ในเวลานี้คุณสามารถใช้เมธอด stringify () ของ JSON เพื่อแปลงวัตถุที่ซับซ้อนเป็นสตริงและเก็บไว้ในที่เก็บข้อมูลเว็บ เมื่ออ่านจากที่เก็บข้อมูลเว็บคุณสามารถแปลงเป็นวัตถุ JSON ด้วยวิธี JSON's Parse ();
การสาธิตสั้น ๆ ต่อไปนี้เพิ่มคุณสมบัติของ บริษัท เพื่อบันทึกรหัส JS :// บันทึกข้อมูล
ฟังก์ชั่นบันทึก () {
var ติดต่อ = วัตถุใหม่;
contact.user_name = document.getElementById ("user_name"). ค่า;
contact.mobilephone = document.getElementById ("mobilephone") ค่า;
ติดต่อ. company = document.getElementById ("บริษัท "). ค่า;
var str = json.stringify (ติดต่อ);
localstorage.setItem (contact.mobilephone, str);
loadall ();
-
// แยกวัตถุทั้งหมดที่เก็บไว้ใน LocalStorage และแสดงบนอินเตอร์เฟส
ฟังก์ชั่น loadall () {
var list = document.getElementById ("รายการ");
if (localstorage.length> 0) {
var result = "<table border = '1'>";
ผลลัพธ์ += "<tr> <td> ชื่อ </td> <td> มือถือ </td> <td> บริษัท </td> </tr>";
สำหรับ (var i = 0; i <localstorage.length; i ++) {
var mobilephone = localstorage.key (i);
var str = localstorage.getItem (mobilephone);
var contact = json.parse (str);
ผลลัพธ์+= "<tr> <td>"+contact.user_name+"</td> <td>"+contact.mobilephone+"</td> <td>"+contact.Company+"</td> </tr>";
-
ผลลัพธ์ += "</bable>";
list.innerhtml = ผลลัพธ์;
}อื่น{
list.innerhtml = "ข้อมูลว่างเปล่าในขณะนี้รีบเร่งและเริ่มเพิ่มผู้ติดต่อ";
-
-
ผลกระทบมีดังนี้: