ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำการใช้งานขั้นพื้นฐานของ LocalStorage, SessionStorage, การดำเนินการสำรวจ, การจัดการข้อยกเว้น ฯลฯ สำหรับที่เก็บข้อมูลท้องถิ่น HTML5 เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
LocalStorage ในพื้นที่เก็บข้อมูลท้องถิ่นของ HTML5 นั้นเหมือนกับ SessionStorage ความแตกต่างคือการล้างเซสชันจะถูกล้างหลังจากปิดหน้าในขณะที่ LocalStorage จะถูกบันทึกตลอดเวลา ลองใช้ LocalStorage เป็นตัวอย่างที่นี่เพื่อแนะนำการจัดเก็บ HTML5 ในท้องถิ่นสั้น ๆ และให้ตัวอย่างสำหรับปัญหาทั่วไปเช่น Traversal LocalStorage เป็น HTML5 API ที่เก็บไว้ในท้องถิ่น มันใช้คู่คีย์-ค่าเพื่อเข้าถึงข้อมูลและข้อมูลที่เข้าถึงได้สามารถเป็นสตริงได้เท่านั้น เบราว์เซอร์ที่แตกต่างกันมีการสนับสนุนที่แตกต่างกันสำหรับ API นี้เช่นวิธีการใช้งานพื้นที่เก็บข้อมูลสูงสุด ฯลฯ
1. วิธีการใช้งานพื้นฐานของ LocalStorage API
LocalStorage API เข้าใจง่าย ต่อไปนี้คือการดำเนินการและตัวอย่าง API ทั่วไป: ตั้งค่าข้อมูล: localstorage.setItem (คีย์, ค่า); ตัวอย่าง:
สำหรับ (var i = 0; i <10; i ++) {
localstorage.setItem (i, i);
-
รับข้อมูล: localstorage.getItem (คีย์) รับข้อมูลทั้งหมด: localstorage.valueof () ตัวอย่าง:
localstorage.getItem (i);
-
ลบข้อมูล: localstorage.removeitem (คีย์) ตัวอย่าง:
localstorage.removeitem (i);
-
ล้างข้อมูลทั้งหมด: localstorage.clear () รับจำนวนข้อมูลที่เก็บไว้ในท้องถิ่น: localstorage.length รับค่าคีย์ของข้อมูล nth: localstorage.key (n)
2. วนซ้ำวิธีคีย์คีย์
สำหรับ (var i = localstorage.length-1; i> = 0; i-) {
console.log ('' + (i + 1) + 'ค่าคีย์ของข้อมูลคือ:' + localstorage.key (i) + 'และข้อมูลคือ:' + localstorage.getItem (localstorage.key (i)));
-
3. การทดสอบขีด จำกัด ขนาดของพื้นที่เก็บข้อมูลและการจัดการข้อยกเว้น
3.1 การทดสอบขีด จำกัด ขนาดการจัดเก็บข้อมูลข้อมูล
เบราว์เซอร์ที่แตกต่างกันโดยทั่วไปมีข้อ จำกัด เกี่ยวกับขนาดการจัดเก็บท้องถิ่นของ HTML5 ผลการทดสอบมีดังนี้:
Firefox 22.0> 5242875 + 5 = 5242880
Chrome 28.0> 2621435 + 5 = 2621440
Safari 5.1> 2621435 + 5 = 2621440
Opera 12.15> 5m (ถ้าเกินกว่ากล่องโต้ตอบที่อนุญาตให้มีการร้องขอสำหรับพื้นที่เพิ่มเติมจะปรากฏขึ้น)
อ้างอิงรหัสทดสอบ:
<! doctype html>
<html>
<head>
<script>
ฟังก์ชั่นบันทึก (ผงชูรส) {
console.log (ผงชูรส);
การแจ้งเตือน (ผงชูรส);
} </p> <p> ขีด จำกัด var;
var half = '1'; // สิ่งนี้จะเปลี่ยนเป็นภาษาจีนและวิ่งอีกครั้ง
var str = ครึ่ง;
var strtr;
ในขณะที่ (1) {
พยายาม {
localstorage.clear ();
str += ครึ่ง;
localstorage.setItem ('แคช', str);
ครึ่ง = str;
} catch (ex) {
หยุดพัก;
-
-
var base = str.length;
var off = base / 2;
var isleft = 1;
ในขณะที่ (ปิด) {
ถ้า (Isleft) {
end = base - (ปิด / 2);
} อื่น {
end = base + (ปิด / 2);
} </p> <p> sstr = str.slice (0, สิ้นสุด);
localstorage.clear ();
พยายาม {
localstorage.setItem ('แคช', str);
ขีด จำกัด = strtr.length;
Isleft = 0;
} catch (e) {
Isleft = 1;
} </p> <p> base = end;
ปิด = math.floor (ปิด / 2);
} </p> <p> บันทึก ('ขีด จำกัด :' + ขีด จำกัด );
</script>
</html>
3.2 การจัดการข้อยกเว้นการจัดเก็บข้อมูล
พยายาม{
localstorage.setItem (คีย์, ค่า);
} catch (oexception) {
if (oException.name == 'quotaExceedEdError') {
console.log ('ขีด จำกัด การจัดเก็บในท้องถิ่นเกิน!');
// หากข้อมูลทางประวัติศาสตร์ไม่สำคัญคุณสามารถเคลียร์ได้แล้วตั้งค่าไว้
localstorage.clear ();
localstorage.setItem (คีย์, ค่า);
-
-