Slide DevCoach

DevCoach 126 : Front-End | Web Storage, Solusi Simpan Data untuk Aplikasimu

Transcript

1. Dicoding Slides Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore. Front-End Web
2. Position Web Storage, Solusi Simpan Data di Aplikasi Web Front-End Web Nur Rizki Adi Curriculum Developer
3. • Menjelaskan peran Web Storage • Menunjukkan Methods dalam Web Storage • Mengidentifikasi Common Use Case • Event Khusus bagi Web Storage Learning Objectives Front-End Web
4. Mari Refleksi Diri! Apa yang sudah dipelajari sebelumnya? Front-End Web
5. Menurut kamu, bagaimana cara web developer menyimpan data? Cookies? Front-End Web
6. Cookies?
7. cookies Browser cookies HTTP cookies Web cookies
8. Common Usage of Cookie • Session management Logins, shopping carts, game scores, or anything else the server should remember. • Personalization User preferences, themes, and other settings. • Tracking Recording and analyzing user behavior. Using HTTP cookies - MDN Front-End Web
9. IndexedDB API Web Storage API Modern Storage API Front-End Web Cache API Shared Storage API Storage API yang akan kita pelajari
10. Apa Itu Web Storage API Menyediakan mekanisme penyimpanan data dalam bentuk pasangan key-value yang lebih intuitif dan modern. • sessionStorage • localStorage Front-End Web Storage - MDN
11. API pada Web Storage setItem() Menyimpan data ke dalam web storage. getItem() Mengambil data dari web storage. removeItem() Menghapus data dari web storage berdasarkan key. clear() Menghapus seluruh data tanpa terkecuali. key() Mencari nama key yang tersimpan berdasarkan index-nya (urutan simpan). Front-End Web
12. localStorage.setItem( 'my-key', 'Dicoding Indonesia', ); setItem() Menyimpan data ke dalam web storage. Front-End Web
13. localStorage.getItem('my-key'); // atau localStorage['my-key']; getItem() Menyimpan data ke dalam web storage. Front-End Web
14. removeItem() localStorage.removeItem( 'my-key' ); Menyimpan data ke dalam web storage. Front-End Web
15. clear() localStorage.clear(); Menyimpan data ke dalam web storage. Front-End Web
16. key() localStorage.key(0); Menyimpan data ke dalam web storage. Front-End Web
17. JavaScript Object Notation (JSON)
18. TodoList dengan Web Storage Front-End Web
19. Common Use Case Web Storage • Dark/light mode • Onboarding user • Game progress
20. Respon Perubahan Web Storage dengan StorageEvent window.addEventListener('storage', (event) => { document.querySelector('.my-key').textContent = event.key; document.querySelector('.my-old').textContent = event.oldValue; document.querySelector('.my-new').textContent = event.newValue; document.querySelector('.my-url').textContent = event.url; document.querySelector('.my-storage').textContent = JSON.stringify(event.storageArea); }); Front-End Web
21. Apa kesimpulannya? Front-End Web
22. Front-End Web localStorage sessionStorage Tidak ada masa kedaluwarsa bagi data. Data hanya bertahan selama satu sesi halaman saja. Data hanya hilang melalui JavaScript atau menghapus Browser cache. Data hanya bertahan selama satu sesi halaman saja. Batas penyimpanan sebanyak 5MB. Batas penyimpanan sebanyak 5MB. Data tidak akan dikirim ke server. Data tidak akan dikirim ke server. Difference Between Two Web Storage Mechanisms Web Storage concepts and usage - MDN
23. Web Storage Behavior in Private Browser Context Private Browsing / Incognito modes - MDN Private windows, incognito mode, and similarly named privacy browsing options, don't store data like history and cookies. In private mode, localStorage is treated like sessionStorage. The storage APIs are still available and fully functional, but all data stored in the private window is deleted when the browser or browser tab is closed. Front-End Web
24. Feedback! Hadiah: • 2 Token Langganan Academy (30 Hari) *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback
25. Thank You nurrizkiadip Nur Rizki Adi Prasetyo @NAdiPrasetyo nrizki@dicoding.com Nur Rizki Adi Prasetyo Nur Rizki Adi Prasetyo Front-End Web
26. Front-end Web