{"id":17157,"library":"amplifyjs","title":"AmplifyJS Client-Side Storage & Messaging","description":"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.","status":"abandoned","version":"1.1.2-beta.2","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install amplifyjs","lang":"bash","label":"npm"},{"cmd":"yarn add amplifyjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add amplifyjs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"import * as amplify from 'amplifyjs';\n// OR\nconst amplify = require('amplifyjs');","symbol":"amplify","correct":"<script src=\"path/to/amplify.min.js\"></script>\n<script>\n  // 'amplify' object is now globally available\n  amplify.store('myKey', 'myValue');\n</script>"},{"note":"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.","symbol":"amplify.store","correct":"<script src=\"path/to/amplify.min.js\"></script>\n<script>\n  amplify.store('username', 'Alice', { expires: 3600000 }); // Store for 1 hour\n  const user = amplify.store('username');\n  console.log(user);\n</script>"},{"note":"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.","symbol":"amplify.publish, amplify.subscribe","correct":"<script src=\"path/to/amplify.min.js\"></script>\n<script>\n  amplify.subscribe('dataUpdated', function(data) {\n    console.log('Received data:', data);\n  });\n\n  amplify.publish('dataUpdated', { id: 1, message: 'Hello' });\n</script>"}],"quickstart":{"code":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>AmplifyJS Quickstart</title>\n    <!-- It is crucial to download amplify.min.js and serve it locally -->\n    <!-- For demonstration, assume it's in the same directory -->\n    <script src=\"./amplify.min.js\"></script>\n</head>\n<body>\n    <h1>AmplifyJS Demo</h1>\n    <p>Check the browser console for output from amplify.store and amplify.pub/sub.</p>\n\n    <script>\n        // 1. Using amplify.store for client-side storage\n        console.log('--- Amplify.store Demo ---');\n        amplify.store('myAppState', { theme: 'dark', userId: 'testUser123' }, { expires: 60000 }); // Store for 1 minute\n        let storedData = amplify.store('myAppState');\n        console.log('Stored initial state:', storedData);\n\n        // Update a value\n        storedData.theme = 'light';\n        amplify.store('myAppState', storedData);\n        console.log('Updated state:', amplify.store('myAppState'));\n\n        // Remove a value after some time (or explicitly)\n        setTimeout(() => {\n            amplify.store('myAppState', null); // Setting to null clears the key\n            console.log('State after 2 seconds (should be null):', amplify.store('myAppState'));\n        }, 2000);\n\n        // 2. Using amplify.publish/subscribe for messaging\n        console.log('\\n--- Amplify.publish/subscribe Demo ---');\n        amplify.subscribe('userLoggedIn', function(userData) {\n            console.log(`User ${userData.name} (ID: ${userData.id}) logged in!`);\n        });\n\n        amplify.subscribe('userLoggedIn', function(userData, timestamp) {\n            console.log(`[Logger] Event received at ${new Date(timestamp).toLocaleTimeString()}`);\n        });\n\n        console.log('Publishing userLoggedIn event...');\n        amplify.publish('userLoggedIn', { name: 'Jane Doe', id: 'jane_d' }, Date.now());\n\n        // Unsubscribe after some time\n        const handlerToUnsubscribe = function(msg) { console.log('This handler will be unsubscribed:', msg); };\n        amplify.subscribe('tempEvent', handlerToUnsubscribe);\n        amplify.publish('tempEvent', 'First message for tempEvent');\n        amplify.unsubscribe('tempEvent', handlerToUnsubscribe);\n        amplify.publish('tempEvent', 'Second message (should not be seen)');\n\n    </script>\n</body>\n</html>","lang":"javascript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=1.1.2-beta.2"},{"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.","message":"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.","severity":"gotcha","affected_versions":"all"},{"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.","message":"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.","severity":"gotcha","affected_versions":"all"},{"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`.","message":"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).","severity":"deprecated","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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`.","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.","error":"Uncaught ReferenceError: amplify is not defined"},{"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.","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).","error":"TypeError: Cannot read properties of undefined (reading 'store') (or similar for 'publish', 'subscribe', etc.)"}],"ecosystem":"npm","meta_description":null}