💾 AppML – Local Storage & WebSQL Support: Create Offline-Ready Web Apps

🧲 Introduction – Why Use Local Storage and WebSQL with AppML?

AppML allows developers to build fully functional, data-driven web applications using only HTML and JSON. By integrating Local Storage and WebSQL, AppML apps can store data offline, maintain state, and even perform CRUD operations without a live server—perfect for static hosting, offline apps, and educational projects.

🎯 In this guide, you’ll learn:

• How AppML uses localStorage and WebSQL
• How to store and retrieve data offline
• How to define local AppML models and sync them
• How to use forms and views with client-side databases

---

🗃️ What Is Local Storage in AppML?

Local Storage is a built-in browser feature that allows you to store key-value pairs on the client side. AppML can use localStorage to store JSON objects directly.

✅ Use Cases:

• Saving app state or preferences
• Storing user form inputs offline
• Retaining records without a backend

---

🖥️ Example – Store Form Data in Local Storage

<div 
  appml-model="models/contact-model.json" 
  appml-data="local:contacts" 
  appml-message>

  <h2>Offline Contact Form</h2>

  <input name="name" placeholder="Name">
  <input name="email" placeholder="Email">
  <textarea name="message" placeholder="Message"></textarea>

  <button appml-submit>Save Locally</button>
</div>

📌 Explanation:

• appml-data="local:contacts" stores the data into localStorage.contacts
• Data persists even if you reload the page
• No server connection is needed

---

📁 Model – models/contact-model.json

{
  "key": "id",
  "fields": [
    { "name": "name", "required": true },
    { "name": "email", "required": true },
    { "name": "message", "required": true }
  ]
}

📌 This ensures all fields are filled before submission using AppML validation.

---

💽 What Is WebSQL and How Does AppML Use It?

WebSQL is a browser feature (now deprecated in most modern browsers except older versions of Chrome and Android) that lets you store and query data using SQL commands inside the browser.

✅ Use Cases:

• Building data-heavy offline apps
• Creating client-side databases for temporary storage
• Teaching SQL concepts in the browser

---

⚠️ WebSQL Browser Compatibility

Browser	Support Status
Chrome	❌ Deprecated
Safari	✅ Supported
Opera (old)	✅ Supported
Firefox/Edge	❌ Not supported

If you need long-term offline support, use IndexedDB or Local Storage instead.

---

🖥️ Example – AppML Using WebSQL (Only in supported browsers)

<div 
  appml-model="models/products-model.json" 
  appml-data="websql:products" 
  appml-message>

  <h2>Local Inventory (WebSQL)</h2>

  <p>{{name}} – ${{price}}</p>

  <input name="name" placeholder="Product Name">
  <input name="price" type="number" placeholder="Price">
  <button appml-submit>Add Product</button>
</div>

📌 Explanation:

• appml-data="websql:products" stores and queries data from a local SQL table named products
• Works like a mini-database inside your browser
• Great for app demos or learning SQL on the frontend

---

📁 WebSQL Model – models/products-model.json

{
  "key": "id",
  "fields": [
    { "name": "name", "required": true },
    { "name": "price", "datatype": "number" }
  ]
}

---

🔄 Sync Local Storage With Remote Data (Hybrid Use)

AppML supports fallback loading:

<div 
  appml-data="local:contacts;data/contacts.json" 
  appml-model="models/contact-model.json">
</div>

📌 What this means:

• First tries to load data from localStorage.contacts
• If not found, falls back to loading data/contacts.json from server

This helps you create offline-first apps that later sync with the cloud.

---

🧠 Best Practices – Working with AppML Local Storage

✅ Tip	🔍 Why It Helps
Use local: for offline-only apps	Fully functional without a server
Store form data in local: keys	Simplifies development and saves drafts
Test WebSQL in Safari or legacy Chrome	Ensure compatibility before production
Combine local + remote fallback	Enables both offline and online modes

---

📌 Summary – Recap & Key Takeaways

AppML lets you build full offline applications using localStorage and WebSQL with zero JavaScript and no server dependency. Whether you’re creating a form, an inventory app, or a data grid, AppML makes storing and retrieving data in the browser easy and reliable.

🔍 Key Takeaways:

• Use appml-data="local:key" to bind data to browser storage
• Use appml-data="websql:table" to interact with a local SQL database
• Combine local: with fallback server data for hybrid apps
• Model-based validation ensures data consistency
• Works great for low-code, offline-first applications

⚙️ Perfect for PWA prototypes, static hosting, student projects, and internal tools.

---

❓ FAQs – Local Storage & WebSQL in AppML

---

❓ Is AppML compatible with IndexedDB?
❌ Not directly. AppML supports only localStorage and WebSQL at this time.

---

❓ Does WebSQL require a server?
✅ No. It’s a local feature. But WebSQL support is limited to specific browsers.

---

❓ How do I clear AppML local data?
✅ Use localStorage.removeItem("key") in your browser console or script.

---

❓ Can I sync local data back to the server?
✅ Yes, but you must write a controller or server-side sync handler manually.

---

❓ What happens if local storage is full?
⚠️ Browsers usually allocate 5–10 MB for localStorage. If exceeded, it will silently fail.

---

Share Now :