Benjamarachutit School
Computing Sciene
M.3
4.6 การเก็บข้อมูลด้วย LOCAL STORAGE
ขั้นตอนที่ 1 Create New App ตั้งชื่อ New Project Name ว่า Local Storage จากนั้นนำเครื่องหมายถูกในช่อง Try it out ออกแล้วกด Create
ขั้นตอนที่ 2 เปลี่ยนชื่อจาก Screen1 เป็น Home และตกแต่งพื้นหลังให้สวยงามโดยไปที่ BackgroundColor แล้วเลือกสีตามที่ต้องการ
ขั้นตอนที่ 3 ให้กด + ตรงข้าง ๆ Home เพื่อเพิ่ม Screen และทำการเปลี่ยนชื่อ Screen เป็น Welcome พร้อมกับใส่สีพื้นหลัง BackgroundColor
ขั้นตอนที่ 4 ให้กลับไปที่หน้า Home แล้วไปที่ User Interface แล้วลาก Button ใส่หน้าจอ และทำการเปลี่ยนชื่อ Button1 > Save , Text > SAVE และทำการกำหนดกับตกแต่ง Text Color , Font Size , BackgroundColor , Border ฯลฯ ตามความต้องการ
ขั้นตอนที่ 5 ไปที่ User Interface แล้วลาก Label ใส่หน้าจอเหนือปุ่ม SAVE และทำการเปลี่ยน Text Label1 > กรุณาพิมพ์ชื่อ และทำการกำหนดกับตกแต่ง Text Color , Font Size ตามความต้องการ
ขั้นตอนที่ 6 ไปที่ User Interface แล้วลาก Text Input ใส่หน้าจอ
ขั้นตอนที่ 7 ให้ไปที่หน้า Welcome แล้วไปที่ User Interface แล้วลาก Label ใส่หน้าจอ และทำการเปลี่ยนชื่อ Label1 > LabelShowName และทำการกำหนดกับตกแต่ง Text Color , Font Size ตามความต้องการ
ขั้นตอนที่ 8 ให้ไปที่ User Interface แล้วลาก Button ใส่หน้าจอข้างล่าง Label และทำการเปลี่ยนชื่อ Button1 > HOME , Text > HOME และทำการกำหนดกับตกแต่ง Text Color , Font Size , BackgroundColor ฯลฯ ตามความต้องการ
ขั้นตอนที่ 9 ให้ไปที่ Data > Local Storage แล้วลากใส่หน้าจอ
ขั้นตอนที่ 10 ต่อไปจะเป็นการต่อบล็อก เพื่อที่ทำให้ปุ่ม SAVE บันทึกข้อมูลได้ โดยไปที่ Save > when Save Click do ลากใส่ที่หน้าจอ แล้วไปที่ Local_Storage1 > in Local_Storage1 call Save ลากมาต่อข้างล่างบล็อก when Save Click do
ขั้นตอนที่ 11 ให้ไปที่ Text_Input1 >Text_Input1 's Text ลากใส่ที่ข้างช่อง value ของ in Local_Storage1 call Save
ขั้นตอนที่ 12 ให้ไปที่ Control > navigate to Home ลากมาต่อตรง then do ของในบล็อก in Local_Storage1 call Save พร้อมกับเปลี่ยนจาก navigate to Home เป็น navigate to Welcome
ขั้นตอนที่ 13 ให้ไปที่หน้า Welcome แล้วไปที่ Welcome > when Welcome Starts Do ลากใส่ที่หน้าจอ แล้วไปที่ Local_Stotage1 > call Local_Storage 's Get ลากใส่ต่อข้างล่างบล็อก when Welcome Starts do
ขั้นตอนที่ 14 ให้ไปที่ LabelShowName > Set LabelShowName 's Text to ลากใส่ตรงที่ then do ของบล็อก in Local_Stotage1 call Get พร้อมกับลาก value มาต่อข้างบล็อก Set LabelShowName 's Text to
ขั้นตอนที่ 15 ให้กลับไปที่หน้า Home แล้วไปที่ User Interface > Button ลากใส่หน้าจอข้างล่าง Button SAVE พร้อมกับตั้งชื่อว่า Next , Text = NEXT
ขั้นตอนที่ 16 ให้ไปที่ Blocks ของหน้า Home แล้วไปที่ Next > when Next Click do ลากใส่หน้าจอ แล้วให้ไป Duplicate บล็อก navigate to Welcome มา จากนั้นนำมาต่อข้างล่างบล็อก when Next Click do
ขั้นตอนที่ 17 ให้ไปที่หน้า Welcome แล้วไปที่ HOME > when HOME Click do ลากใส่ที่หน้าจอ จากนั้นไปที่ Control > navigate to HOME นำมาลากใส่ต่อข้างล่างบล็อก when HOME Click do เป็นการจบการต่อบล็อกของแอปพลิเคชันนี้
ผลลัพธ์ที่ได้
เมื่อกด Save