AmplifyJS Client-Side Storage & Messaging

1.1.2-beta.2 verified Wed Apr 22 auth: no javascript abandoned

AmplifyJS is a legacy JavaScript library designed to simplify common web application problems, primarily client-side data storage and publish/subscribe messaging. Its core functionalities include `amplify.store` for persistent local storage (localStorage, sessionStorage, cookies) and `amplify.request` for simplified AJAX requests and client-side pub/sub (`amplify.publish`, `amplify.subscribe`). The library, last updated to version 1.1.2 in 2012 and developed by appendTo, is now considered abandoned. It predates modern JavaScript module systems (like ESM or CommonJS) and was typically included via `<script>` tags, exposing a global `amplify` object. It has no active development, bug fixes, or security patches, making it unsuitable for new projects or existing applications requiring modern maintenance. It should not be confused with AWS Amplify, which is a completely separate, actively maintained suite of tools for cloud-enabled applications.

Common errors

error Uncaught ReferenceError: amplify is not defined ↓

cause The AmplifyJS library was not loaded correctly or was loaded after the script attempting to use it, or an ES Module `import` was used.

fix

Ensure amplify.min.js is included via a <script> tag in your HTML head or body *before* any other JavaScript code tries to access the amplify global object. Do not use import or require.

error TypeError: Cannot read properties of undefined (reading 'store') (or similar for 'publish', 'subscribe', etc.) ↓

cause Similar to 'amplify is not defined', this indicates the `amplify` global object was not present when its methods were called, often due to incorrect script loading order or an environment where the global object isn't available (e.g., Node.js without a JSDOM-like setup).

fix

Verify the <script src="path/to/amplify.min.js"> tag is correctly placed and accessible in the HTML. Ensure that no other script is overwriting the global amplify variable.

Warnings

breaking AmplifyJS is an abandoned library. It has not received updates, bug fixes, or security patches since 2012 (version 1.1.2). Using it in production applications poses significant security risks and will lead to compatibility issues with modern browsers and frameworks. ↓

fix Migrate to a modern client-side storage solution (e.g., `localStorage`, `sessionStorage`, libraries like `localForage` or framework-specific state management) and a dedicated pub/sub or event bus library if needed. Avoid using AmplifyJS entirely.

gotcha AmplifyJS does not support modern JavaScript module systems (ESM or CommonJS). It must be included via a global <script> tag. Attempts to `import` or `require` it will fail, as it does not provide module exports. ↓

fix Always include `amplify.min.js` directly in your HTML with a `<script>` tag before any code that attempts to use the `amplify` global object.

gotcha The global `amplify` object can conflict with other scripts or libraries that define a global variable of the same name. This is a common issue with older libraries that pollute the global namespace. ↓

fix There is no built-in `noConflict` mode. If a conflict occurs, you must manually refactor one of the conflicting libraries or wrap AmplifyJS in an immediately invoked function expression (IIFE) to limit its scope, although this would prevent its intended global access.

deprecated The `amplify.request` component, designed for AJAX requests, is severely outdated. It lacks modern features like Promises, `fetch` API compatibility, and robust error handling found in modern HTTP clients (e.g., Axios, `fetch` API). ↓

fix Use the native `fetch` API or a well-maintained HTTP client library like Axios, ky, or superagent for network requests. Do not use `amplify.request`.

Install

npm install amplifyjs

yarn add amplifyjs

pnpm add amplifyjs

Imports

amplify

wrong

import * as amplify from 'amplifyjs';
// OR
const amplify = require('amplifyjs');

correct

<script src="path/to/amplify.min.js"></script>
<script>
  // 'amplify' object is now globally available
  amplify.store('myKey', 'myValue');
</script>

AmplifyJS is a legacy browser-only library that exposes a global 'amplify' object when included via a <script> tag. It does not support modern ES Module (import) or CommonJS (require) syntax. Attempts to import it will fail.

amplify.store

<script src="path/to/amplify.min.js"></script>
<script>
  amplify.store('username', 'Alice', { expires: 3600000 }); // Store for 1 hour
  const user = amplify.store('username');
  console.log(user);
</script>

The `amplify.store` method is accessed directly from the global `amplify` object for client-side persistent storage. It provides methods for setting, getting, and removing data with optional expiration.

amplify.publish, amplify.subscribe

<script src="path/to/amplify.min.js"></script>
<script>
  amplify.subscribe('dataUpdated', function(data) {
    console.log('Received data:', data);
  });

  amplify.publish('dataUpdated', { id: 1, message: 'Hello' });
</script>

The pub/sub methods `amplify.publish` and `amplify.subscribe` are also accessed via the global `amplify` object, enabling basic event-driven communication within the browser environment.

Quickstart

This quickstart demonstrates how to include AmplifyJS via a <script> tag and utilize its primary features: `amplify.store` for setting, getting, and removing client-side data, and `amplify.publish`/`amplify.subscribe` for a basic publish-subscribe messaging pattern within the browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AmplifyJS Quickstart</title>
    <!-- It is crucial to download amplify.min.js and serve it locally -->
    <!-- For demonstration, assume it's in the same directory -->
    <script src="./amplify.min.js"></script>
</head>
<body>
    <h1>AmplifyJS Demo</h1>
    <p>Check the browser console for output from amplify.store and amplify.pub/sub.</p>

    <script>
        // 1. Using amplify.store for client-side storage
        console.log('--- Amplify.store Demo ---');
        amplify.store('myAppState', { theme: 'dark', userId: 'testUser123' }, { expires: 60000 }); // Store for 1 minute
        let storedData = amplify.store('myAppState');
        console.log('Stored initial state:', storedData);

        // Update a value
        storedData.theme = 'light';
        amplify.store('myAppState', storedData);
        console.log('Updated state:', amplify.store('myAppState'));

        // Remove a value after some time (or explicitly)
        setTimeout(() => {
            amplify.store('myAppState', null); // Setting to null clears the key
            console.log('State after 2 seconds (should be null):', amplify.store('myAppState'));
        }, 2000);

        // 2. Using amplify.publish/subscribe for messaging
        console.log('\n--- Amplify.publish/subscribe Demo ---');
        amplify.subscribe('userLoggedIn', function(userData) {
            console.log(`User ${userData.name} (ID: ${userData.id}) logged in!`);
        });

        amplify.subscribe('userLoggedIn', function(userData, timestamp) {
            console.log(`[Logger] Event received at ${new Date(timestamp).toLocaleTimeString()}`);
        });

        console.log('Publishing userLoggedIn event...');
        amplify.publish('userLoggedIn', { name: 'Jane Doe', id: 'jane_d' }, Date.now());

        // Unsubscribe after some time
        const handlerToUnsubscribe = function(msg) { console.log('This handler will be unsubscribed:', msg); };
        amplify.subscribe('tempEvent', handlerToUnsubscribe);
        amplify.publish('tempEvent', 'First message for tempEvent');
        amplify.unsubscribe('tempEvent', handlerToUnsubscribe);
        amplify.publish('tempEvent', 'Second message (should not be seen)');

    </script>
</body>
</html>