เนื้อหาของบทเรียนนี้คือการแนะนำการจัดเก็บเว็บซึ่งใช้เพื่อจัดเก็บข้อมูลของคู่คีย์-ค่าในเบราว์เซอร์ มันใช้งานได้เหมือนคุกกี้ก่อนหน้านี้ แต่ดีกว่าและข้อมูลที่เก็บไว้อาจมีขนาดใหญ่ขึ้น มีสองประเภทของการจัดเก็บเว็บ: ที่เก็บข้อมูลท้องถิ่นและที่เก็บเซสชันซึ่งใช้กลไกการใช้งานเดียวกันยกเว้นว่าการมองเห็นและวงจรชีวิตแตกต่างกัน
1. ใช้ที่เก็บข้อมูลในเครื่องเราใช้วัตถุ LocalStorage เพื่อเข้าถึงที่เก็บข้อมูลในเครื่องซึ่งส่งคืนวัตถุจัดเก็บซึ่งใช้ในการจัดเก็บข้อมูลของคู่คีย์-ค่า มันมีคุณสมบัติและวิธีการดังต่อไปนี้:
Clear (): จัดเก็บข้อมูลคู่คีย์-ค่าอย่างชัดเจน;
getItem (<sey>): รับค่าผ่านคีย์;
คีย์ (<dexd>): รับค่าคีย์ผ่านดัชนี;
ความยาว: ส่งคืนจำนวนคู่คีย์-ค่า;
removeItem (<sey>): ลบข้อมูลที่ระบุผ่านคีย์;
SetItem (<sey>, <value>): เพิ่มคู่คีย์-ค่า เมื่อคู่คีย์-ค่าของคีย์ที่ระบุมีอยู่การดำเนินการอัปเดตจะถูกนำไปใช้
[<sey>]: ใช้คีย์เพื่อรับค่าที่ระบุผ่านตัวห้อยอาร์เรย์
วัตถุจัดเก็บช่วยให้เราสามารถจัดเก็บข้อมูลคู่คีย์ค่าในรูปแบบของสตริง คีย์นั้นไม่ซ้ำกันซึ่งหมายความว่าเมื่อเราใช้เมธอด setItem เพื่อเพิ่มคู่คีย์-ค่าหากมีค่าคีย์อยู่แล้วการดำเนินการอัปเดตจะถูกนำไปใช้ ดูตัวอย่างต่อไปนี้:
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<style>
ร่างกาย> *{ลอย: ซ้าย;}
ตาราง {การล่มสลายของชายแดน: การล่มสลาย; ระยะขอบซ้าย: 50px;}
th, td {padding: 4px;}
th {text-allign: ขวา;}
อินพุต {border: บางสีดำแข็ง; การตอบสนอง: 2px;}
ฉลาก {min-Width: 50px; แสดง: inline-block; text-allign: right;}
#Countmsg, #Buttons {Margin-Left: 50px; margin-top: 5px; margin-bottom: 5px;}
</style>
</head>
<body>
<div>
<div>
<label> คีย์: </label> <input id = "key" placeholder = "Enter key"/> </div>
<div>
<label> ค่า: </label> <อินพุต id = "value" placeHolder = "ป้อนค่า"/> </div>
<div id = "ปุ่ม">
<button id = "เพิ่ม"> เพิ่ม </button>
<button id = "ล้าง"> ล้าง </button>
</div>
<p id = "countmsg"> มี <span id = "count"> </span> รายการ </p>
</div>
<table id = "data">
<tr>
<th> จำนวนรายการ: </th>
<td id = "count">-</td>
</tr>
</table>
<script>
displaydata ();
ปุ่ม var = document.getElementsByTagname ('ปุ่ม');
สำหรับ (var i = 0; i <buttons.length; i ++) {
ปุ่ม [i] .onclick = handlebuttonpress;
-
ฟังก์ชั่น handlebuttonpress (e) {
สวิตช์ (e.target.id) {
กรณี 'เพิ่ม':
var key = document.getElementById ('คีย์') ค่า;
var value = document.getElementById ('value'). ค่า;
localstorage.setItem (คีย์, ค่า);
หยุดพัก;
กรณี 'ชัดเจน':
localstorage.clear ();
หยุดพัก;
-
displaydata ();
-
ฟังก์ชั่น displaydata () {
var TableTelement = document.getElementById ('data');
Tablelement.innerhtml = '';
var itemCount = localstorage.length;
document.getElementById ('count'). innerhtml = itemCount;
สำหรับ (var i = 0; i <itemcount; i ++) {
var key = localstorage.key (i);
var val = localstorage.getItem (คีย์);
TableElement.innerhtml + = '<tr> <th>' + คีย์ + ': </th> <td>' + val + '</td> </tr>';
-
-
</script>
</body>
</html>
มาดูผลการทำงาน :เบราว์เซอร์ไม่สามารถลบข้อมูลที่เราสร้างผ่าน LocalStorage ได้เว้นแต่ผู้ใช้จะลบออก
2. ฟังกิจกรรมการจัดเก็บข้อมูลข้อมูลที่เก็บไว้ผ่านที่เก็บข้อมูลในท้องถิ่นสามารถมองเห็นได้จากเอกสารที่มาจากต้นกำเนิดเดียวกัน ตัวอย่างเช่นหากคุณเปิดเบราว์เซอร์โครเมี่ยมสองตัวเพื่อเข้าถึงที่อยู่ URL เดียวกันพื้นที่เก็บข้อมูลท้องถิ่นที่สร้างขึ้นในหน้าใด ๆ ก็สามารถมองเห็นได้ในหน้าอื่น ๆ อย่างไรก็ตามหากคุณเปิดที่อยู่ URL เดียวกันกับเบราว์เซอร์อื่น (เช่น Firefox) ที่เก็บข้อมูลในท้องถิ่นจะมองไม่เห็นเพราะมีแหล่งที่แตกต่างกัน เหตุการณ์การจัดเก็บใช้เพื่อฟังการเปลี่ยนแปลงในเนื้อหาการจัดเก็บ มาดูกันว่าคุณสมบัติใดที่มี:
คีย์: ส่งคืนค่าคีย์ที่เปลี่ยนแปลง
OldValue: ส่งคืนค่าก่อนที่จะเปลี่ยนค่าคีย์;
NewValue: ส่งคืนค่าค่าใหม่ที่มีการเปลี่ยนแปลงค่าคีย์;
URL: ที่อยู่ URL ที่มีการเปลี่ยนแปลง
StorageArea: ส่งคืนวัตถุที่เก็บข้อมูลที่เปลี่ยนแปลง (ที่เก็บข้อมูลท้องถิ่นหรือที่เก็บเซสชัน)
มาดูตัวอย่างด้านล่าง:
<! doctype html>
<html>
<head>
<title> Storage </title>
<style>
ตาราง {การล่มสลายของชายแดน: ยุบ;}
th, td {padding: 4px;}
</style>
</head>
<body>
<table id = "data">
<tr>
<th> key </th>
<th> oldValue </th>
<th> newValue </th>
<th> url </th>
<th> storagearea </th>
</tr>
</table>
<script>
var TableTelement = document.getElementById ('data');
window.onstorage = function (e) {
var row = '<tr>';
แถว + = '<td>' + e.key + '</td>';
แถว + = '<td>' + e.olevalue + '</td>';
แถว + = '<td>' + e.newValue + '</td>';
แถว + = '<td>' + e.url + '</td>';
แถว + = '<td>' + (e.storagearea == localstorage) + '</td> </tr>';
Tablelement.innerhtml += แถว;
-
</script>
</body>
</html>
ในตัวอย่างที่ 1 เราเพิ่มลบและแก้ไขข้อมูลการจัดเก็บและจะแสดงในหน้าตัวอย่าง 2 ตัวอย่างที่ 2 ทำงานตามปกติในเบราว์เซอร์ Chrome Firefox ไม่ตอบสนองและเบราว์เซอร์อื่น ๆ ไม่ได้ทดสอบ
ผลการทำงาน :3. ใช้ที่เก็บเซสชัน
ที่เก็บเซสชันนั้นเหมือนกับที่เก็บข้อมูลในเครื่องยกเว้นว่าการเข้าถึงนั้น จำกัด อยู่ที่หน้าปัจจุบันและจะหายไปหลังจากปิดหน้า เราเข้าถึงผ่าน SessionStorage
<! doctype html>
<html>
<head>
<title> ตัวอย่าง </title>
<style>
ร่างกาย> *{ลอย: ซ้าย;}
ตาราง {การล่มสลายของชายแดน: การล่มสลาย; ระยะขอบซ้าย: 50px;}
th, td {padding: 4px;}
th {text-allign: ขวา;}
อินพุต {border: บางสีดำแข็ง; การตอบสนอง: 2px;}
ฉลาก {min-Width: 50px; แสดง: inline-block; text-allign: right;}
#Countmsg, #Buttons {Margin-Left: 50px; margin-top: 5px; margin-bottom: 5px;}
</style>
</head>
<body>
<div>
<div>
<label> คีย์: </label> <input id = "key" placeholder = "Enter key"/> </div>
<div>
<label> ค่า: </label> <อินพุต id = "value" placeHolder = "ป้อนค่า"/> </div>
<div id = "ปุ่ม">
<button id = "เพิ่ม"> เพิ่ม </button>
<button id = "ล้าง"> ล้าง </button>
</div>
<p id = "countmsg"> มี <span id = "count"> </span> รายการ </p>
</div>
<table id = "data">
<tr>
<th> จำนวนรายการ: </th>
<td id = "count">-</td>
</tr>
</table>
<iframe src = "storage.html"> </iframe>
<script>
displaydata ();
ปุ่ม var = document.getElementsByTagname ("ปุ่ม");
สำหรับ (var i = 0; i <buttons.length; i ++) {
ปุ่ม [i] .onclick = handlebuttonpress;
-
ฟังก์ชั่น handlebuttonpress (e) {
สวิตช์ (e.target.id) {
กรณี 'เพิ่ม':
var key = document.getElementById ("คีย์") ค่า;
var value = document.getElementById ("value"). ค่า;
SessionStorage.setItem (คีย์, ค่า);
หยุดพัก;
กรณี 'ชัดเจน':
SessionStorage.Clear ();
หยุดพัก;
-
displaydata ();
-
ฟังก์ชั่น displaydata () {
var TableTelement = document.getElementById ('data');
Tablelement.innerhtml = '';
var itemCount = sessionStorage.length;
document.getElementById ('count'). innerhtml = itemCount;
สำหรับ (var i = 0; i <itemcount; i ++) {
var key = sessionstorage.key (i);
var val = sessionstorage.getItem (คีย์);
TableElement.innerhtml + = "<tr> <th>" + คีย์ + ": </th> <td>" + val + "</td> </tr>";
-
-
</script>
</body>
</html>
เอฟเฟกต์การทำงาน :หากคุณทำการเปลี่ยนแปลงใด ๆ ในตัวอย่างที่ 3 หน้าในตัวอย่างที่ 2 จะไม่เปลี่ยนแปลง
สรุป :SessionStorage ใช้เพื่อจัดเก็บข้อมูลในเซสชันในพื้นที่ซึ่งสามารถเข้าถึงได้ในหน้าเว็บในเซสชันเดียวกันและข้อมูลจะถูกทำลายหลังจากเซสชันเสร็จสิ้น ดังนั้น SessionStorage จึงไม่ได้เป็นที่เก็บข้อมูลในพื้นที่ถาวร แต่มีเพียงการจัดเก็บระดับเซสชัน
LocalStorage ใช้สำหรับที่เก็บข้อมูลในพื้นที่ถาวรและข้อมูลจะไม่หมดอายุเว้นแต่จะถูกลบอย่างแข็งขัน
ความแตกต่างระหว่างการจัดเก็บเว็บและคุกกี้: แนวคิดของการจัดเก็บเว็บนั้นคล้ายกับคุกกี้ความแตกต่างคือมันถูกออกแบบมาสำหรับที่เก็บความจุขนาดใหญ่ ขนาดของคุกกี้มี จำกัด และทุกครั้งที่คุณขอหน้าใหม่คุกกี้จะถูกส่งไปซึ่งจะสูญเสียแบนด์วิดธ์ นอกจากนี้คุกกี้จะต้องมีขอบเขตที่ระบุและไม่สามารถเรียกได้ข้ามโดเมน นอกจากนี้ Web Storage มี setitem, getItem, removeItem, Clear และวิธีอื่น ๆ ซึ่งแตกต่างจากคุกกี้นักพัฒนาส่วนหน้าจำเป็นต้องห่อหุ้ม setcookies และ getcookies เอง นอกจากนี้แต่ละโดเมน (รวมถึงโดเมนย่อย) ของที่เก็บข้อมูลเว็บมีพื้นที่เก็บข้อมูลอิสระและพื้นที่เก็บข้อมูลแต่ละพื้นที่มีความเป็นอิสระอย่างสมบูรณ์ดังนั้นจึงไม่ทำให้เกิดความสับสน
แต่คุกกี้ก็เป็นสิ่งที่ขาดไม่ได้: ฟังก์ชั่นของคุกกี้คือการโต้ตอบกับเซิร์ฟเวอร์และมีอยู่เป็นส่วนหนึ่งของข้อกำหนด HTTP ในขณะที่การจัดเก็บเว็บถูกสร้างขึ้นเพื่อจัดเก็บข้อมูลในเครื่องเท่านั้น
ดาวน์โหลดซอร์สโค้ด