How can I access the details of a logged-in user on a Webflow page to track items they have seen in a collection and exclude them next time they open the page?

Webflow doesn’t offer native support for user authentication or logged-in user data access, so tracking what individual users have seen in a collection requires integrating third-party tools and custom logic.

​

Here’s how you can handle this using Memberstack, Firebase Auth, or other user authentication systems combined with local storage or a database.

​

1. Set Up Memberstack (or Authentication System)

​

• Use Memberstack (v2 recommended) to handle user sign-up, login, and membership tracking.
• After login, Memberstack exposes the user’s data via the window.MemberStack object.
• You'll need access to the user’s unique ID to identify them and personalize content.

​

2. Collect and Store Viewed Items

​

• Every time a user views an item (e.g., opens a CMS item page or scrolls past it), track its CMS Item ID or slug using JavaScript.
• Store this data in the browser’s localStorage for session-based tracking or in Memberstack’s User JSON field for persistent tracking.

​

Example using localStorage:

• When a CMS item is shown, add its slug/ID to an array and save it in localStorage, e.g., localStorage.setItem('viewedItems', JSON.stringify(viewedArray)).

​

3. Exclude Viewed Items on Page Load

​

• Use Webflow’s CMS + JavaScript to hide or filter items already stored in localStorage:
• On page load, retrieve the array from localStorage.
• Loop through CMS list items (by class) with JavaScript.
• If a CMS item's slug is in the viewed list, use .style.display = "none" or element.remove() to hide it.

​

You can’t truly prevent the CMS item from loading via Webflow’s logic—only from displaying it after the page loads.

​

4. Optional: Sync to Memberstack User Fields

​

• For logged-in users, store the viewed items in Memberstack's custom JSON field.
• When the user logs in again, use this tracked data to filter which CMS items to display.
• Requires custom JavaScript to read from and write to Memberstack’s user fields.

​

5. Limitations and Considerations

​

• No secure access to CMS lists before rendering—filtering happens client-side post-load.
• Not scalable for large lists, since the full Collection still renders initially.
• For advanced filtering on the back end, consider custom backend APIs with Webflow’s CMS API and gated content.

​

Summary

​

You can track and exclude viewed CMS items by using custom JavaScript to store item IDs in localStorage or a Memberstack user field, and dynamically hiding these items on page load. This requires integrating Webflow with a user authentication system like Memberstack and writing frontend filtering logic using JavaScript.