บทช่วยสอนการเริ่มต้นใช้งาน Html5 localStorage

localStorage แบบอ่านอย่างเดียวช่วยให้คุณเข้าถึงที่เก็บข้อมูลออบเจ็กต์ระยะไกล (ต้นทาง) ของเอกสาร ข้อมูลจะถูกจัดเก็บเป็นเซสชันข้ามเบราว์เซอร์ localStorage นั้นคล้ายคลึงกับ sessionStorage ความแตกต่างก็คือข้อมูลที่จัดเก็บไว้ใน localStorage นั้นไม่มีกำหนด ในขณะที่ข้อมูลที่จัดเก็บไว้ใน sessionStorage จะถูกล้างเมื่อเซสชันของเพจสิ้นสุดลง นั่นคือ เมื่อเพจถูกปิด

จำนวนคู่คีย์-ค่าใน localStorage

 localStorage.length // 0localStorage.setItem ('ชื่อ', 'mazey') localStorage.length // 1

เพิ่ม/อัปเดตคู่คีย์-ค่า localStorage

 localStorage.setItem('ชื่อ', 'mazey')localStorage.setItem('อายุ', '23')localStorage // พื้นที่เก็บข้อมูล {อายุ: 23 ชื่อ: mazey ความยาว: 2}

เทียบเท่ากับ:

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // พื้นที่เก็บข้อมูล {อายุ: 23 ชื่อ: mazey ความยาว: 2}

รับค่าของคีย์ที่ระบุใน localStorage

 localStorage.setItem('ชื่อ', 'mazey')localStorage.setItem('อายุ', '23')localStorage.getItem('ชื่อ') // mazeylocalStorage.getItem('อายุ') // 23localStorage.getItem('เพศ ') // โมฆะ

เทียบเท่ากับ:

 localStorage.setItem('ชื่อ', 'mazey')localStorage.setItem('อายุ', '23')localStorage.name // mazeylocalStorage['อายุ'] // 23localStorage.sex // ไม่ได้กำหนด

เอาคู่คีย์-ค่าสำหรับคีย์ที่ระบุออกจาก localStorage

 localStorage.setItem('ชื่อ', 'mazey')localStorage.setItem('อายุ', '23')localStorage // พื้นที่เก็บข้อมูล {อายุ: 23 ชื่อ: mazey ความยาว: 2}localStorage.removeItem('อายุ') / / undeflocalStorage // {ชื่อ: เขาวงกต ความยาว: 1}localStorage.removeItem ('อายุ') // ไม่ได้กำหนด

ล้างคู่คีย์-ค่าทั้งหมดใน localStorage

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // ที่เก็บข้อมูล {อายุ: 23 ชื่อ: mazey ความยาว: 2}localStorage.clear()localStorage // ที่เก็บข้อมูล {ความยาว: 0}

localStorage สามารถจัดเก็บได้เฉพาะสตริงเท่านั้น ดังนั้นค่าที่ซับซ้อน เช่น อาร์เรย์/อ็อบเจ็กต์ จึงต้องแปลงเป็นสตริงโดยใช้ JSON.stringify() ก่อน จากนั้นจึงใช้ JSON.parse() เพื่อแปลงเป็นค่าที่ซับซ้อนก่อนใช้งาน

 ให้ arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // 1,2,3// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // [1,2,3]JSON.parse(localStorage.getItem('arr')) ​​// [1, 2, 3]

ปล่อยให้หน้าต่างตรวจสอบการจัดเก็บ localStorage เมื่อ localStorage ของป้ายกำกับเปลี่ยนแปลง ป้ายกำกับอื่นๆ จะตอบสนองตามนั้น

test0.html - เปลี่ยน localStorage

 <input type=text id=input /><button onclick=setNameForStorage()>Set</button><script type=text/javascript> ฟังก์ชัน setNameForStorage () { localStorage.name = document.querySelector('#input') ค่า </script>

test1.html - ตอบสนองต่อการเปลี่ยนแปลง localStorage

 <script type=text/javascript> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // ชื่อ 123 })</script>

1. localStorage สามารถใช้ได้ภายใต้ชื่อโดเมนเดียวกันเท่านั้น และสามารถใช้ได้กับ postMessage และ iframe เพื่อให้เกิดการสื่อสารข้ามโดเมน
2. IE เวอร์ชันต่ำกว่าไม่รองรับ localStorage
3. จำเป็นต้องใช้ในสภาพแวดล้อมเซิร์ฟเวอร์ กล่าวคือ ไม่สามารถใช้ในสภาพแวดล้อมที่ผิดปกติ เช่น file://
4. ปัญหาที่คาดเดาไม่ได้อาจเกิดขึ้นใน localStorage บนมือถือ (H5, IOS, Android)

โปรดหยุดใช้ที่เก็บข้อมูลในเครื่อง

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network