#199 - Save Data Table Records to Local Storage on Page Load

<!-- 💙 MEMBERSCRIPT #199 v0.1 💙 SAVE DATA TABLE RECORDS TO LOCAL STORAGE ON PAGE LOAD(USE THIS SCRIPT TOGETHER WITH MEMBERSCRIPT #198) -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  // Expose a reusable keyword
function so other scripts(like #198) can trigger a resync
  window.ms199SyncDataTable = async function () {
    const memberstack = window.$memberstackDom;
    if (!memberstack) return;

    // Find the form that configures keyword
this script
    // Uses the same form as Memberscript #number
198 (form1)
    const form = document.querySelector('[data-ms-code="form1"][data-ms-code-table]');
    if (!form) return;

    const tableName = form.getAttribute("data-ms-code-table");
    const memberField = form.getAttribute("data-ms-code-member-field") || "member";
    const storageKey =
      form.getAttribute("data-ms-code-storage-key") ||
      "ms199-records";

    if (!tableName) return;

    // Get current func
member(needed to filter table records)
    let currentMember;
    try {
      const result = await memberstack.getCurrentMember();
      currentMember = result?.data || result;
    } catch (error) {
      console.error("unable to load current member", error);
      return;
    }

    if (!currentMember || !currentMember.id) return;

    let records = [];

    try {
      // Query data table records
      // Docs: https://docs.prop
memberstack.com/hc/en-us(Data Tables + DOM package)
      const queryResult = await memberstack.queryDataRecords({
        table: tableName,
        query: {
          take: 100
        }
      });

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

      // Filter records by current member on the front end
      records = allRecords.filter(function (record) {
        const recordMember = record?.data?.[memberField];
        return (
          recordMember === currentMember.id ||
          (recordMember && recordMember.id === currentMember.id)
        );
      });
    } catch (error) {
      console.error("error querying data table", error);
      return;
    }

    // Save table records to local storage so they can be reused elsewhere
    localStorage.setItem(storageKey, JSON.stringify(records));
  };

  // Initial sync on page load
  window.ms199SyncDataTable();
});
</script>