Scott and Wes dive into the world of local data storage, breaking down the pros and cons of Sqlite, LocalStorage, SessionStorage, Cookies, and IndexedDB. They cover real-world use cases like user settings, offline data, and auth tokens, while sharing their favorite tools and strategies for keeping your data fast and secure. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=00:30">00:30</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li> <li class="has-line-data" data-line-start="6" data-line-end="13"> <a href="#t=01:43">01:43</a> Why store data locally. <ul> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=01:55">01:55</a> User preferences and settings.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=02:50">02:50</a> Not logged in state (shopping carts, etc).</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=03:30">03:30</a> Data for faster loading.</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=03:51">03:51</a> Privacy concerns.</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=04:25">04:25</a> Large files or drafts.</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=05:50">05:50</a> Auth tokens.</li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="18"> <a href="#t=07:08">07:08</a> Where to store data. <ul> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=07:11">07:11</a> Cookies.</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=07:48">07:48</a> Local storage.</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=09:15">09:15</a> Session storage.</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=10:35">10:35</a> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=12:15">12:15</a> <a href= "https://github.com/byojs/storage">BYOJS Storage</a>.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="#t=13:41">13:41</a> SQlite via WASM.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=14:12">14:12</a> Penalties of SQLite in browser via WASM.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=15:29">15:29</a> <a href= "https://github.com/electric-sql/pglite">PGLite</a>.</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=16:23">16:23</a> Dealing with migrations.</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=16:55">16:55</a> The advantages of the approach.</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=18:42">18:42</a> <a href= "https://dexie.org/">Dexie</a>.</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=19:59">19:59</a> Patch messages.</li> <li class="has-line-data" data-line-start="26" data-line-end="30"> <a href="#t=21:25">21:25</a> A few options. <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://tinybase.org/guides/the-basics/architectural-options/">TinyBase Docs</a>.</li> <li class="has-line-data" data-line-start="28" data-line-end="30"> <a href="https://localfirstweb.dev/">Local First Web</a>.</li> </ul> </li> </ul> <a id="Hit_us_up_on_Socials_30"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

861: Local Data: Sqlite, LocalStorage, Session, Cookies and IndexDB

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews