Home-theater-designers
LocalStorage เป็น web API ที่สร้างขึ้นในเบราว์เซอร์ ซึ่งช่วยให้เว็บแอปพลิเคชันจัดเก็บคู่คีย์-ค่าบนอุปกรณ์ภายในเครื่องของคุณ เป็นวิธีง่ายๆ ในการจัดเก็บข้อมูล แม้ว่าคุณจะปิดเบราว์เซอร์แล้วก็ตาม
MUO วิดีโอประจำวันนี้ เลื่อนเพื่อดำเนินการต่อด้วยเนื้อหา
คุณสามารถรวม LocalStorage เข้ากับแอป Vue ของคุณเพื่อจัดเก็บรายการและข้อมูลขนาดเล็กอื่นๆ ได้ วิธีนี้ช่วยให้คุณรักษาข้อมูลผู้ใช้ในเซสชันแอปต่างๆ ได้
หลังจากบทช่วยสอนนี้ คุณจะมีแอปสิ่งที่ต้องทำ Vue ที่สามารถเพิ่มและลบงาน โดยจัดเก็บข้อมูลโดยใช้ LocalStorage
การตั้งค่าแอปพลิเคชัน Vue To-Do
ก่อนที่คุณจะเริ่มเขียนโค้ด ตรวจสอบให้แน่ใจว่าคุณมี ติดตั้ง Node และ NPM บนอุปกรณ์ของคุณ .
หากต้องการสร้างโปรเจ็กต์ใหม่ ให้รันคำสั่ง npm นี้:
npm create vue
คำสั่งจะต้องให้คุณเลือกค่าที่ตั้งไว้ล่วงหน้าสำหรับแอปพลิเคชัน Vue ใหม่ของคุณก่อนที่จะสร้างและติดตั้งการขึ้นต่อกันที่จำเป็น
คุณไม่จำเป็นต้องมีคุณสมบัติพิเศษสำหรับแอปสิ่งที่ต้องทำนี้ ดังนั้นเลือก 'ไม่' สำหรับการตั้งค่าล่วงหน้าที่มีอยู่ทั้งหมด
ฉันจะดูได้อย่างไรว่าใครบล็อกฉันใน Facebook
เมื่อตั้งค่าโปรเจ็กต์แล้ว คุณจะเริ่มสร้างแอปพลิเคชันสิ่งที่ต้องทำด้วย LocalStorage ได้
การสร้างแอปพลิเคชันสิ่งที่ต้องทำ
สำหรับบทช่วยสอนนี้ คุณจะสร้างองค์ประกอบ Vue สององค์ประกอบ: App.vue สำหรับโครงสร้างโดยรวมและ Todo.vue เพื่อแสดงรายการงาน
การสร้างองค์ประกอบสิ่งที่ต้องทำ
สำหรับองค์ประกอบ Todo ให้สร้างไฟล์ใหม่ src/components/Todo.vue . ไฟล์นี้จะจัดการโครงสร้างของรายการงาน
วางรหัสต่อไปนี้ลงใน Todo.vue ไฟล์:
<!-- Todo.vue -->
<script setup>
const props = defineProps(['todos']);
const emit = defineEmits(['remove-todo']);
const removeTodo = (index) => {
emit('remove-todo', index);
};
</script>
<template>
<div class="todo-list">
<ul>
<li v-for="(todo, index) in props.todos" :key="index" class="todo-item">
{{ todo.text }}
<button @click="removeTodo(index)" class="remove-button">
Remove
</button>
</li>
</ul>
</div>
</template>
ข้อมูลโค้ดข้างต้นให้รายละเอียดเกี่ยวกับโครงสร้างของ ทั้งหมด ส่วนประกอบ. โดยจะตั้งค่าองค์ประกอบเพื่อรับข้อมูลและปล่อยเหตุการณ์ผ่านการใช้อุปกรณ์ประกอบฉากและเหตุการณ์ที่กำหนดเองตามลำดับ
เพื่ออธิบายเพิ่มเติม โค้ดนี้ใช้ อุปกรณ์ประกอบฉาก Vue สำหรับการสื่อสารระหว่างส่วนประกอบ เพื่อรับ ทั้งหมด อาร์เรย์จากองค์ประกอบหลัก แอพ.vue . จากนั้นมันก็ใช้ v-for คำสั่งสำหรับการเรนเดอร์รายการ เพื่อวนซ้ำผ่านอาร์เรย์ todos ที่ได้รับ
รหัสยังส่งเสียงเหตุการณ์ที่กำหนดเองด้วย ลบทั้งหมด พร้อมเพย์โหลด ดัชนี . ซึ่งจะทำให้คุณสามารถลบงานเฉพาะที่มีดัชนีเฉพาะในอาร์เรย์ todos ได้
เมื่อคลิกที่ ลบ ปุ่ม ข้อมูลโค้ดจะทริกเกอร์การปล่อยเหตุการณ์ที่กำหนดเองไปยังองค์ประกอบหลัก สิ่งนี้บ่งชี้ว่าคุณได้คลิกปุ่มแล้ว พร้อมท์ให้เรียกใช้ฟังก์ชันที่เกี่ยวข้องซึ่งกำหนดไว้ภายในองค์ประกอบหลัก App.vue
การสร้างส่วนประกอบมุมมองของแอปพลิเคชัน
มุ่งหน้าไปที่ แอพ.vue เพื่อสร้างแอปพลิเคชัน Todo ต่อไป ที่ แอป ส่วนประกอบจะจัดการกับการเพิ่มงานใหม่และเรนเดอร์ ทั้งหมด ส่วนประกอบ.
วางสิ่งต่อไปนี้ สคริปต์ บล็อกเข้าไปในไฟล์ App.vue ของคุณ:
2CFA7B6953650ECCCA51C14831899236F5137AD8ข้อมูลโค้ดข้างต้นสรุปตรรกะของ แอพ.vue ส่วนประกอบ. ตัวอย่างนำเข้าไฟล์ ทั้งหมด และเริ่มต้นตัวแปรเชิงโต้ตอบด้วย Vue Composition API
รหัสเริ่มต้นด้วยการนำเข้าองค์ประกอบ Todo และ อ้างอิง ฟังก์ชั่นจากเส้นทางที่ระบุและ ดู ตามลำดับ
ตัวอย่างข้อมูลจะเริ่มต้นสตริงที่มีปฏิกิริยา ใหม่สิ่งที่ต้องทำ เพื่อจัดเก็บงานที่คุณจะป้อน นอกจากนี้ยังเตรียมใช้งานปฏิกิริยาที่ว่างเปล่าอีกด้วย ทั้งหมด อาร์เรย์ถือรายการงาน
ที่ เพิ่มสิ่งที่ต้องทำ ฟังก์ชั่นเพิ่มงานใหม่ให้กับอาร์เรย์ todos หาก newTodo ไม่ว่างเปล่า ระบบจะพุชเข้าไปในอาร์เรย์เมื่อมีการยืนยัน และรีเซ็ตค่า newTodo เพื่อให้คุณสามารถเพิ่มงานได้มากขึ้น
ฟังก์ชัน addTodo ยังเรียกใช้ บันทึกToLocalStorage, ซึ่งจะบันทึกอาร์เรย์ todos ลงใน LocalStorage ของเบราว์เซอร์ ตัวอย่างใช้ ชุดรายการ วิธีการนี้เพื่อให้บรรลุเป้าหมายนี้ และแปลงอาร์เรย์ todos เป็นสตริง JSON ก่อนจัดเก็บข้อมูล
นอกจากนี้ยังกำหนดว่า ลบสิ่งที่ต้องทำ ฟังก์ชั่นที่รับ สำคัญ เป็นพารามิเตอร์ มันใช้ปุ่มนี้เพื่อลบสิ่งที่เกี่ยวข้อง ทั้งหมด จากอาร์เรย์ todos หลังจากการเอาออก ฟังก์ชันremovTodoจะเรียกsaveToLocalStorageเพื่ออัปเดตข้อมูล LocalStorage
ในที่สุดรหัสก็ใช้ รับรายการ วิธีการที่มีอยู่ใน LocalStorage เพื่อดึงงานที่บันทึกไว้ก่อนหน้านี้ด้วยคีย์ todos หากคุณได้บันทึกงานไว้ใน LocalStorage ของเบราว์เซอร์ โค้ดจะผลักงานเหล่านั้นเข้าไปในอาร์เรย์สิ่งที่ต้องทำ
ตอนนี้ คุณได้จัดการตรรกะของส่วนประกอบ App.vue แล้ว ให้วางโค้ดต่อไปนี้ใน แม่แบบ บล็อกของแอป Vue ของคุณเพื่อสร้างส่วนต่อประสานผู้ใช้:
<!-- App.vue -->
<template>
<div class="app">
<h1>To do List</h1>
<div class="add-todo">
<input v-model="newTodo" @keyup.enter="addTodo"
placeholder="Add a new task" class="todo-input" />
<button @click="addTodo" class="add-button">Add</button>
</div>
<Todo :todos="todos" @remove-todo="removeTodo" />
</div>
</template>
เทมเพลตใช้ v-รุ่น , วิธีการผูกข้อมูลใน Vue เพื่อผูกสิ่งที่ต้องทำที่ป้อนเข้ากับ ใหม่สิ่งที่ต้องทำ สตริงปฏิกิริยา เทมเพลตยังใช้ไฟล์ v-on คำสั่งในการจัดการเหตุการณ์ใน Vue ผ่านการจดชวเลข ( @ ).
มันใช้ v-on เพื่อฟังทั้ง คลิก และ เข้า เหตุการณ์สำคัญเพื่อยืนยัน newTodo
สุดท้ายนี้ เทมเพลตจะใช้ส่วนขยาย ทั้งหมด องค์ประกอบที่คุณสร้างขึ้นก่อนเพื่อแสดงรายการสิ่งที่ต้องทำ ที่ :ทั้งหมด ไวยากรณ์ผ่าน ทั้งหมด อาร์เรย์เป็นอุปกรณ์ประกอบขององค์ประกอบ Todo
ที่ @ ลบทุกอย่าง ไวยากรณ์ตั้งค่าตัวฟังเหตุการณ์เพื่อบันทึกเหตุการณ์ที่กำหนดเองที่องค์ประกอบ Todo ปล่อยออกมาและเรียกใช้ ลบสิ่งที่ต้องทำ ทำหน้าที่ตอบสนอง.
ตอนนี้คุณได้กรอกใบสมัครเรียบร้อยแล้ว คุณสามารถเลือกจัดแต่งทรงได้ตามใจชอบ คุณสามารถดูตัวอย่างแอปพลิเคชันของคุณได้โดยการรันคำสั่งนี้:
npm run dev
คุณควรเห็นหน้าจอดังนี้:
คุณสามารถเพิ่มหรือลบงานภายในแอปพลิเคชัน Todo ได้ ยิ่งไปกว่านั้น ด้วยการผสานรวม LocalStorage คุณสามารถรีเฟรชแอปพลิเคชันหรือออกจากแอปพลิเคชันทั้งหมดได้ รายการสิ่งที่ต้องทำที่ดูแลจัดการของคุณจะยังคงเหมือนเดิม
เหตุใดคอนโทรลเลอร์ xbox ของฉันจึงตัดการเชื่อมต่ออย่างต่อเนื่อง
ความสำคัญของ LocalStorage
การรวม LocalStorage ในเว็บแอปพลิเคชันถือเป็นสิ่งสำคัญสำหรับทั้งนักพัฒนามือใหม่และนักพัฒนาที่มีประสบการณ์ LocalStorage แนะนำให้ผู้เริ่มต้นรู้จักความคงอยู่ของข้อมูลโดยอนุญาตให้จัดเก็บและเรียกค้นเนื้อหาที่ผู้ใช้สร้างขึ้น
LocalStorage มีความสำคัญเนื่องจากคุณสามารถมั่นใจได้ว่าข้อมูลผู้ใช้ของคุณยังคงไม่เปลี่ยนแปลงในเซสชันต่างๆ LocalStorage ขจัดความจำเป็นในการสื่อสารเซิร์ฟเวอร์อย่างต่อเนื่อง ส่งผลให้โหลดเร็วขึ้นและตอบสนองดีขึ้นในเว็บแอปพลิเคชัน