กรอกไปตั้งนาน refresh ทีเดียวหายหมด
ฟอร์มยาวหายหมดตอน refresh เพราะ AI เก็บค่าไว้แค่ในหน่วยความจำถ้าเราไม่บอก ให้ save ระหว่างที่กรอก ดึงกลับตอนเปิดใหม่ และเขียนเทสต์ที่ reload จริง
ลูกค้ากรอกฟอร์มยาวๆ ไปสิบนาที
เผลอกด refresh
กลับมาอีกที ว่างเปล่า
เขาไม่กรอกใหม่หรอกครับ เขาปิดไปเลย
ตอนเราเขียน เราไม่เคย refresh เรากรอกแล้วกด submit เลย
เพราะเรารู้ว่าปุ่มอยู่ตรงไหน เราเลยไม่เคยเห็นปัญหานี้
เรื่องมันง่ายมาก
ของที่อยู่ในหน่วยความจำ พอปิดแท็บมันก็หายไปพร้อมกัน
ของที่เขียนลงที่ไหนสักที่ มันอยู่ต่อ
AI เขียนแบบแรกให้เราเสมอถ้าเราไม่บอก เพราะมันสั้นกว่า และตอนเทสต์มันก็ทำงานได้
ทีนี้ลองถามตัวเองสามข้อ
หายตอน refresh มั้ย ถ้าใช่ เก็บลง localStorage
หายตอนเปลี่ยนเครื่องมั้ย ถ้าใช่ ต้องเก็บที่ server
หายตอนแอปพังกลางทางมั้ย ถ้าใช่ ต้อง save ระหว่างที่เขากรอก ไม่ใช่รอตอนกด submit ทีเดียว
เอาไปลองวันนี้ ใช้เวลาสิบวินาที
เปิดหน้าที่มีฟอร์มยาวที่สุดในแอปตัวเอง กรอกไปสักครึ่งนึง แล้วกด refresh
ถ้าหายหมด ลูกค้าคนแรกที่เน็ตกระตุกก็จะเจอแบบเดียวกัน
แล้วบอก AI แบบนี้
ฟอร์มนี้ต้องไม่หายตอน refresh
- เก็บค่าที่กรอกไว้ทุกครั้งที่ user พิมพ์เสร็จ ไม่ใช่ตอน submit
- ตอนเปิดหน้ามาใหม่ ให้ดึงของเดิมกลับมาใส่ให้
- พอ submit สำเร็จแล้วค่อยล้างทิ้ง
- เขียนเทสต์ที่กรอกแล้ว reload แล้ว assert ว่าค่ายังอยู่
ข้อสุดท้ายสำคัญสุด
ถ้าไม่มีเทสต์ที่ reload จริง เราจะไม่รู้เลยว่าที่แก้ไปมันได้ผลมั้ย
ศัพท์เอาไปค้นต่อ
state คือค่าที่แอปจำไว้ตอนกำลังทำงาน
persistence คือการเก็บไว้ให้อยู่ข้ามรอบ
localStorage คือที่เก็บในเครื่องผู้ใช้ อยู่ข้าม refresh
autosave คือชื่อเรียกวิธีเก็บระหว่างทาง ไม่รอ submit
ของที่อยู่แค่ในหน่วยความจำ ไม่ได้แปลว่าไม่มี
แปลว่ายังไม่มีใครปิดแท็บให้มันหาย