โพสต์นี้สาธิตเมธอด Storage “key()” ใน JavaScript
Storage key() Method ทำอะไรใน JavaScript?
“ สำคัญ() ” เมธอดเชื่อมโยงกับออบเจกต์ Storage ที่ดึงชื่อคีย์ที่วางไว้ที่ดัชนีที่ระบุ วัตถุ 'ที่เก็บข้อมูล' อาจเป็น ' ท้องถิ่น ” หรือ “ การประชุม ' พื้นที่จัดเก็บ. อนุญาตให้ผู้ใช้เข้าถึงคีย์ที่เก็บข้อมูลในเครื่องและเซสชัน
ไวยากรณ์ (สำหรับการจัดเก็บในเครื่อง)
ที่จัดเก็บในเครื่อง สำคัญ ( ดัชนี ) ;
ไวยากรณ์ข้างต้นยอมรับหนึ่งพารามิเตอร์ “ ดัชนี ” ที่ส่งคืนชื่อของคีย์ที่ดัชนีที่กำหนด
ไวยากรณ์ (สำหรับการจัดเก็บเซสชัน)
เซสชั่นสตอเรจ สำคัญ ( ดัชนี ) ;
ไวยากรณ์ข้างต้นยังรองรับพารามิเตอร์ “index” เช่นเดียวกับ “localStorage”
ไวยากรณ์ทั้งสองที่กำหนดไว้ข้างต้นส่งคืนชื่อคีย์ของวัตถุที่เก็บข้อมูลเป็นสตริง ลองใช้ทั้งสองอย่างทีละอย่าง
ตัวอย่างที่ 1: การใช้เมธอด Storage “key()” เพื่อดึงชื่อ Local Storage Key ที่ระบุ
ตัวอย่างนี้อธิบายการใช้งานจริงของเมธอด “key()” ของสตอเรจเพื่อรับชื่อคีย์ของสตอเรจอินเด็กซ์ที่ระบุในเครื่อง
รหัส HTML
ขั้นแรก ดูโค้ด HTML ที่กำหนด:
< ชั่วโมง2 > คีย์การจัดเก็บ ( ) วิธี ในจาวาสคริปต์ ชั่วโมง2 >< ปุ่มบนคลิก = 'myFunc()' > รับรหัสที่เก็บข้อมูลในเครื่องที่ระบุ ปุ่ม >
< รหัสพี = 'การสาธิต' > หน้า >
ในข้อมูลโค้ดด้านบน:
- ขั้นแรก ระบุหัวข้อย่อยผ่านทาง “ ” แท็ก
- ถัดไป เพิ่มปุ่มด้วยความช่วยเหลือของ ' <ปุ่ม> ” แท็กประกอบด้วย “ เมื่อคลิก ” เหตุการณ์เพื่อดำเนินการฟังก์ชั่น “ myFunc() ” ที่ปุ่มคลิก
- สุดท้าย สร้างย่อหน้าว่างโดยใช้ “ ” แท็กที่สามารถเข้าถึงได้ง่ายผ่าน id ที่กำหนด “demo”
รหัสจาวาสคริปต์
ถัดไป ดำเนินการตามรหัสที่ระบุไว้ด้านล่าง:
< สคริปต์ >ที่จัดเก็บในเครื่อง ชุดรายการ ( 'เว็บไซต์' , 'ลีนุกซ์' ) ;
ที่จัดเก็บในเครื่อง ชุดรายการ ( 'ติวเตอร์แรก' , 'เอชทีเอ็มแอล' ) ;
ที่จัดเก็บในเครื่อง ชุดรายการ ( 'แบบฝึกหัดที่สอง' , 'จาวาสคริปต์' ) ;
ฟังก์ชัน myFunc ( ) {
มี x = ที่จัดเก็บในเครื่อง สำคัญ ( 1 ) ;
เอกสาร. getElementById ( 'การสาธิต' ) . HTML ภายใน = x ;
}
สคริปต์ >
ในบล็อกรหัสด้านบน:
- “ ที่จัดเก็บในเครื่อง ” คุณสมบัติเกี่ยวข้องกับ “ setItem() ” วิธีการตั้งค่ารายการที่จัดเก็บในตัวเครื่องที่ระบุ
- ถัดไป ฟังก์ชันชื่อ “ myFunc() ” ถูกกำหนด
- ในนิยามของคำว่า “ สำคัญ() ” วิธีการเชื่อมโยงกับ “ ที่จัดเก็บในเครื่อง คุณสมบัติ ” เพื่อรับชื่อคีย์ของดัชนีแรก
- หลังจากนั้น “ document.getElementById() วิธีการ ” ถูกนำไปใช้เพื่อเข้าถึงย่อหน้าว่างโดยใช้รหัส 'สาธิต' เพื่อต่อท้ายด้วย 'ชื่อ' คีย์รายการที่จัดเก็บในเครื่อง
เอาต์พุต
ดังที่เห็น เอาต์พุตแสดงชื่อคีย์ของรายการที่จัดเก็บในเครื่อง เช่น “SecondTutorial” ที่ดัชนีแรกโดยทำตามลำดับตัวอักษรเมื่อคลิกปุ่ม
ตัวอย่างที่ 2: การใช้เมธอด “key()” ที่เก็บข้อมูลเพื่อรับชื่อคีย์ที่เก็บข้อมูลเซสชันที่ระบุ
ในตัวอย่างนี้ เมธอด Storage “key()” จะส่งคืนชื่อคีย์ที่เก็บข้อมูลเซสชันพร้อมดัชนีเฉพาะ
รหัส HTML
ขั้นแรก ให้อ่านโค้ด HTML ต่อไปนี้:
< ชั่วโมง2 > คีย์การจัดเก็บ ( ) วิธี ในจาวาสคริปต์ ชั่วโมง2 >< ปุ่มบนคลิก = 'myFunc()' > รับรหัสการจัดเก็บเซสชันที่ระบุ ปุ่ม >
< รหัสพี = 'การสาธิต' > หน้า >
โค้ดด้านบนเหมือนกับตัวอย่างที่ 1 แต่มีการปรับปรุงเล็กน้อยในเนื้อหา HTML
รหัสจาวาสคริปต์
ถัดไป ไปที่รหัสต่อไปนี้:
< สคริปต์ >เซสชั่นสตอเรจ ชุดรายการ ( 'เว็บไซต์' , 'ลีนุกซ์' ) ;
เซสชั่นสตอเรจ ชุดรายการ ( 'อันดับแรก' , 'เอชทีเอ็มแอล' ) ;
เซสชั่นสตอเรจ ชุดรายการ ( 'ที่สอง' , 'จาวาสคริปต์' ) ;
ฟังก์ชัน myFunc ( ) {
มี x = เซสชั่นสตอเรจ สำคัญ ( 2 ) ;
เอกสาร. getElementById ( 'การสาธิต' ) . HTML ภายใน = x ;
}
สคริปต์ >
ที่นี่ รายการพื้นที่เก็บข้อมูลเซสชันถูกสร้างขึ้นโดยใช้ ' เซสชั่นสตอเรจ ” คุณสมบัติ และจากนั้น “ สำคัญ() วิธีการ ” ถูกนำไปใช้เพื่อรับชื่อคีย์การจัดเก็บเซสชันดัชนีที่ระบุของดัชนีที่สอง
เอาต์พุต
ในผลลัพธ์นี้ เมธอด “key()” แสดงชื่อคีย์ของรายการพื้นที่เก็บข้อมูลเซสชันที่จัดเก็บที่ดัชนีที่สอง กระบวนการค้นหาชื่อคีย์การจัดเก็บเป็นไปตามลำดับตัวอักษรที่เริ่มค้นหาจาก ' 0 ” ดัชนี
บทสรุป
JavaScript ให้พื้นที่เก็บข้อมูล “ สำคัญ() ” วิธีการรับชื่อคีย์พร้อมดัชนีเฉพาะของทั้ง “ ท้องถิ่น ' และ ' การประชุม วัตถุจัดเก็บ โดยจะค้นหาชื่อคีย์ที่ระบุในที่เก็บข้อมูล จากนั้นจึงแสดงชื่อใน DOM (Document Object Model) ต้องการเพียงพารามิเตอร์ 'ดัชนี' เพื่อทำงานนี้ โพสต์นี้แสดงการทำงานของเมธอด “key()” ของ JavaScript Storage โดยละเอียด