Ionic中数据存WebSQL而非IndexedDB的问题排查与解决

Hi there! Let's break down why your Ionic Storage is defaulting to WebSQL and how to switch it to IndexedDB like you want.

Why It's Using WebSQL #

Ionic Storage has a default driver priority order: WebSQL > IndexedDB > LocalStorage. If your browser environment supports WebSQL (which many desktop browsers do), it'll pick that first—even if you prefer IndexedDB. That's exactly what's happening here.

Step-by-Step Fix #

1. Update @ionic/storage (if needed) #

First, make sure you're on the latest version of the storage package to avoid any outdated config issues:

npm install @ionic/storage@latest

2. Configure Storage to Prioritize IndexedDB #

In your app.module.ts (or the root module of your app), modify the IonicStorageModule.forRoot() configuration to set driverOrder with IndexedDB first. This tells Ionic to use IndexedDB if it's available:

import { NgModule } from '@angular/core';
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [/* ... */],
  imports: [
    // ... other imports
    IonicStorageModule.forRoot({
      name: '__myAppDatabase', // Name your database whatever you want
      driverOrder: ['indexeddb', 'websql', 'localstorage'] // IndexedDB first!
    })
  ],
  bootstrap: [/* ... */]
})
export class AppModule {}

3. Clear Existing WebSQL Data #

Your browser might still have old WebSQL data cached, so we need to wipe that to ensure the new config takes effect:

• Open your app in the browser with ionic serve
• Hit F12 to open DevTools
• Go to the Application tab
• Under Storage, find Web SQL, right-click your database, and delete it
• Also, clear any existing IndexedDB data if present (to start fresh)
• Refresh the page

4. Verify It's Working #

Now test your storage methods again:

// Example: Store an object
await this.storage.set('user_profile', { name: 'Alessio', role: 'Developer' });

// Retrieve it
const profile = await this.storage.get('user_profile');
console.log(profile); // Should log the object, not a string

Check DevTools > Application > IndexedDB—you should see your database there, and the stored value will show the object structure (instead of a plain string like in WebSQL).

Quick Note on Data Storage #

Make sure you're storing objects directly (not pre-stringified with JSON.stringify()). Ionic Storage automatically handles serialization/deserialization for you, so storing an object directly will let you view its structure clearly in IndexedDB.

内容的提问来源于stack exchange，提问作者AlessioF