AMP Local Storage Demo

This repository provides a solution for implementing localStorage functionality within Accelerated Mobile Pages (AMP). Due to the restrictive nature of AMP, direct manipulation of localStorage is not possible. This project leverages amp-script to provide a way to get, set, and remove items from local storage, enabling state management for AMP pages.

Features

• Get: Retrieve a value from localStorage by its key.
• Set: Store a key-value pair in localStorage.
• Remove: Delete a specific item from localStorage.
• Cross-Page Compatibility: Demonstrates a method for local storage on both AMP and non-AMP pages.

Installation and Usage

To use this solution, you will need to include the amp-script component in your AMP HTML file and then define the script that interacts with the localStorage API.

First, add the required AMP script to your page's :

<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

Next, define the amp-script component and the JavaScript code that will perform the localStorage operations. The following example demonstrates how to set and retrieve a value.

<amp-script id="localStorageDemo" layout="container" script="local-storage-script">
    <div class="p-4 bg-gray-100 rounded-lg shadow-sm">
        <label for="name-input" class="block text-sm font-medium text-gray-700">Enter your name:</label>
        <input type="text" id="name-input" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
        <button id="save-button" class="mt-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            Save
        </button>
        <p class="mt-4 text-sm text-gray-500">Your saved name is: <span id="saved-name" class="font-bold"></span></p>
    </div>
</amp-script>

<script id="local-storage-script" type="text/plain" target="amp-script">
    const nameInput = document.getElementById('name-input');
    const saveButton = document.getElementById('save-button');
    const savedNameSpan = document.getElementById('saved-name');

    // Retrieve name from local storage on load
    const savedName = localStorage.getItem('user-name');
    if (savedName) {
        savedNameSpan.textContent = savedName;
    } else {
        savedNameSpan.textContent = 'None';
    }

    // Save name to local storage on button click
    saveButton.addEventListener('click', () => {
        const nameToSave = nameInput.value;
        if (nameToSave) {
            localStorage.setItem('user-name', nameToSave);
            savedNameSpan.textContent = nameToSave;
            nameInput.value = '';
        }
    });
</script>

Note: As per the AMP documentation, amp-script requires a user interaction to run most of the time. The code above is a general demonstration and may need to be adapted based on your specific use case.

Contributing

Contributions are welcome! If you find a bug or have a suggestion for an improvement, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.