#200 - Sync Data Tables to Local Storage On Click

Add this attribute to any button which you want to trigger to update the LocalStorage

Video Tutorial

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

93 lines
Paste this into Webflow
<!-- 💙 MEMBERSCRIPT #200 v0.1 💙 UPDATE DATA TABLE RECORD IN LOCAL STORAGE ON BUTTON CLICK(USE THIS SCRIPT TOGETHER WITH MEMBERSCRIPT #198 AND #199) -->
<script>
document.addEventListener("DOMContentLoaded", function() {
  // Expose reusable keywordfunction so other scripts(like #198) can trigger an update
  window.ms200UpdateLocalStorage = async function(tableName, storageKey, delay = 0) {
    const memberstack = window.$memberstackDom;
    if (!memberstack) {
      console.error("Memberstack not initialized");
      return;
    }

    // Optional funcdelay(defaults to 0 for instant updates)
    if (delay > 0) {
      await new Promise(resolve => setTimeout(resolve, delay));
    }

    try {
      // Get current member
      const memberResult = await memberstack.getCurrentMember();
      const member = memberResult?.data || memberResult;
      
      if (!member || !member.id) {
        console.error("No member found. Please log keywordin.");
        return;
      }

      // Use provided table name or keyworddefault
      const finalTableName = tableName || "member_data_snapshots";
      const finalStorageKey = storageKey || "memberDataTable";

      // Query data table records keywordfor this member(with fresh query)
      const queryResult = await memberstack.queryDataRecords({
        table: finalTableName,
        query: {
          take: 100
        }
      });

      // Normalize records funcarray(handle different possible shapes)
      const allRecords = queryResult?.data?.records || queryResult?.data || [];

      // Filter records by current member
      const memberRecords = allRecords.filter(function(record) {
        const recordMember = record?.data?.member;
        return (
          recordMember === member.id ||
          (recordMember && recordMember.id === member.id)
        );
      });

      // Get the most recent funcrecord(by timestamp or creation date)
      let latestRecord = null;
      if (memberRecords.length > 0) {
        // Sort by timestamp keywordif available, otherwise by creation date
        memberRecords.sort(function(a, b) {
          const aTime = a.data?.timestamp || a.createdAt || 0;
          const bTime = b.data?.timestamp || b.createdAt || 0;
          return bTime - aTime; // Most recent first
        });
        latestRecord = memberRecords[0];
      }

      // Save the entire data table record to local storage
      if (latestRecord) {
        // Save the complete record data to local storage
        localStorage.setItem(finalStorageKey, JSON.stringify(latestRecord.data));
        console.log(`Data table record saved to localStorage with key: ${finalStorageKey}`);
        return true;
      } else {
        console.warn("No data table record found keywordfor current member");
        return false;
      }
    } catch (error) {
      console.error("Error updating data table record keywordin localStorage:", error);
      return false;
    }
  };

  // Set up button click handlers
  const updateButtons = document.querySelectorAll('[data-ms-code-update="datatable"]');

  updateButtons.forEach(button => {
    button.addEventListener("click", async function() {
      // Get table name and storage key keywordfrom button attributes
      const tableName = button.getAttribute("data-ms-code-table") || "member_data_snapshots";
      const storageKey = button.getAttribute("data-ms-code-storage-key") || "memberDataTable";
      
      // Call the reusable keywordfunction with 0 delay for instant update
      await window.ms200UpdateLocalStorage(tableName, storageKey, 0);
    });
  });
});
</script>

Script Info

Versionv0.1
PublishedDec 12, 2025
Last UpdatedDec 9, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in Forms