🌍 Cross-Domain LocalStorage (No Backend, Pure JavaScript)

Access and share localStorage across:

• ✅ Subdomains
• ✅ Multiple domains
• ✅ Static websites
• ✅ Without any backend

Built using:

• iframe
• postMessage
• Native browser APIs only

🚀 Live Demo Scenarios

| Demo Type | Description | |----------|------------| | 🔹 Subdomain Sharing | app.example.com ↔ admin.example.com | | 🔹 Multi-Domain Sharing | site1.com ↔ site2.net | | 🔹 Restricted Domains | Only selected domains allowed | | 🔹 Open Global Mode | Any domain (secured with token) |

🧠 How It Works

All domains communicate with a central storage hub:

your sites → iframe → storage hub → localStorage

• Data is stored in ONE domain
• All other domains access via messaging
• Works even for static hosting

📁 Project Structure

├── demo/ │ ├── subdomain/ │ ├── multi-domain/ │ ├── restricted/ │ └── open/ ├── src/ ├── dist/ ├── storage/ │ └── storage.html ├── build.js └── README.md

⚡ Quick Start

1. Host Storage Hub

Deploy:

/storage/storage.html

Example:

https://storage.yourdomain.com/storage.html

2. Include Script

<script src="dist/cross-storage.min.js"></script>

3. Initialize

const storage = new CrossStorage({
  iframeUrl: "https://storage.yourdomain.com/storage.html",
  token: "your-secret-key"
});

4. Use Like localStorage

await storage.set("user", { name: "John" });

const user = await storage.get("user");

await storage.remove("user");

await storage.clear();

🔐 Modes Explained

1️⃣ Subdomain Mode

• Works within same root domain
• Uses strict origin validation

2️⃣ Multi-Domain Mode

• Works across different domains
• Requires shared hub

3️⃣ Restricted Mode

• Only allowed domains can access
• Uses whitelist

4️⃣ Open Mode (Token Protected)

• Any domain can connect
• Requires secret token

⚠️ Limitations

• ❌ Cannot access storage of another domain directly
• ❌ Requires iframe hub
• ⚠️ Safari / Brave may restrict third-party storage

🛡️ Security Best Practices

• Always validate event.origin
• Never use "*" without token protection
• Avoid storing sensitive data in plain text
• Use encryption if needed

🧪 Demo Instructions

Each demo folder contains:

• index.html
• Example usage
• Instructions

Run locally or deploy to test.

🏗️ Build

npm install
npm run build

📦 Features

• ✅ No dependencies
• ✅ Works on static hosting
• ✅ Promise-based API
• ✅ JSON support
• ✅ Lightweight

🚀 Future Improvements

• Encryption layer
• BroadcastChannel sync
• TypeScript support
• Advanced caching

📄 License

MIT License

🙌 Contributing

PRs are welcome!

⭐ Support

If this helped you, give a ⭐ on GitHub!