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

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

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.