Answers.Body: <p>Does it have to be local storage? If a cookie would work, then you’d be able to achieve this directly via Twig code.</p>
  <pre><code>{{ sprig('_components/groupCards', {
      entryId: entry.id,
      order: craft.app.request.cookies.get('order') }}
  }) }}
  </code></pre>
  <p>And then in your component:</p>
  <pre><code>{% set order = order ?? '' %}
  {% if order %}
      {% do craft.app.response.cookies.add(create({
          class: 'yii\\web\\cookie',
          name: 'order',
          value: order,
      })) %}
  {% endif %}
  </code></pre>
  <p>Note that getting and setting cookies is easier using the <a href="https://plugins.craftcms.com/cookies" rel="nofollow noreferrer">Cookies</a> plugin.</p>
  <pre><code>{% set order = getCookie('order') %}
  </code></pre>
  <pre><code>{% set order = order ?? '' %}
  {% if order %}
      {% do craft.cookies.set('order', order) %}
  {% endif %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-04-12T13:51:23.580Z
Answers.Text: Thanks Ben, love Sprig. I'll pop it through Cookies ~ I actually thought it'd be easier via localstorage but twig's cookies works too.
Answers.UserDisplayName: JMKelley
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-04-12T13:49:33.433Z
Answers.LastActivityDate: 2024-04-12T13:52:31.973Z
Answers.LastEditDate: 2024-04-12T13:52:31.973Z
Answers.UserDisplayName: Ben Croker
Body: <p>I have a changing sort dropdown using Sprig, works great. Though, I'd like to save this sort order to local storage and pass it as the default to my sprig component.</p>
  <p>What's the best way to do this? Is there a way to directly pass a JS variable to sprig components?</p>
  <p>This is my parent:</p>
  <pre><code>{{ sprig('_components/groupCards', {
      entryId: entry.id,
  }) }}
     
  {% js %}
      document.addEventListener('DOMContentLoaded', function() {
          const sortOrderSelect = document.getElementById('order');
  
          // Check if a sort order is saved in local storage and update the select element
          const savedOrder = localStorage.getItem('order');
          if (savedOrder) {
              sortOrderSelect.value = savedOrder;
              console.log(savedOrder)
          }
          // Change LocalStorage to the new value of the select box.
          sortOrderSelect.addEventListener('change', function() {
              localStorage.setItem('order', this.value);
          });
      });
  {% endjs %}
  </code></pre>
  <p>and my component:</p>
  <pre><code> {# Sprig Empty Variables #}
   {% set order = order ?? ''%}
   {% set entry = craft.entries.id(entryId).one() %}
  
   {% set entryQuery = craft.entries()
          .section('products')
          .relatedTo(entry)
          .with(['image'])
          .limit(20)
          .orderBy(order)
       %}
  
  {% set count = entryQuery.count() %}
  
  &lt;select sprig name=&quot;order&quot; id=&quot;order&quot; value=&quot;{{ order }}&quot; class=&quot;form-control&quot; s-replace=&quot;#items&quot;&gt;
      &lt;option value=&quot;productNumber&quot;&gt;Product Number&lt;/option&gt;
      &lt;option value=&quot;title asc&quot;&gt;Title Ascending&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p>Tried a few different ways, but seem to either run into CORS error's or HTMX errors.</p>
  
Tags: <plugin-sprig><craft5>
Title: Local Storage with Sprig
ThreadText: # Local Storage with Sprig
  
  (Asked by: username_0 on 2024-04-12)
  
  I have a changing sort dropdown using Sprig, works great. Though, I'd like to save this sort order to local storage and pass it as the default to my sprig component.
  
  What's the best way to do this? Is there a way to directly pass a JS variable to sprig components?
  
  This is my parent:
  
  ```
  {{ sprig('_components/groupCards', {
      entryId: entry.id,
  }) }}
     
  {% js %}
      document.addEventListener('DOMContentLoaded', function() {
          const sortOrderSelect = document.getElementById('order');
  
          // Check if a sort order is saved in local storage and update the select element
          const savedOrder = localStorage.getItem('order');
          if (savedOrder) {
              sortOrderSelect.value = savedOrder;
              console.log(savedOrder)
          }
          // Change LocalStorage to the new value of the select box.
          sortOrderSelect.addEventListener('change', function() {
              localStorage.setItem('order', this.value);
          });
      });
  {% endjs %}
  
  ```
  
  and my component:
  
  ```
   {# Sprig Empty Variables #}
   {% set order = order ?? ''%}
   {% set entry = craft.entries.id(entryId).one() %}
  
   {% set entryQuery = craft.entries()
          .section('products')
          .relatedTo(entry)
          .with(['image'])
          .limit(20)
          .orderBy(order)
       %}
  
  {% set count = entryQuery.count() %}
  
  <select sprig name="order" id="order" value="{{ order }}" class="form-control" s-replace="#items">
      <option value="productNumber">Product Number</option>
      <option value="title asc">Title Ascending</option>
  </select>
  
  ```
  
  Tried a few different ways, but seem to either run into CORS error's or HTMX errors.
  
  **Tags:** plugin-sprig, craft5
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2024-04-12. Score: 2 | Accepted answer
  
  Does it have to be local storage? If a cookie would work, then you’d be able to achieve this directly via Twig code.
  
  ```
  {{ sprig('_components/groupCards', {
      entryId: entry.id,
      order: craft.app.request.cookies.get('order') }}
  }) }}
  
  ```
  
  And then in your component:
  
  ```
  {% set order = order ?? '' %}
  {% if order %}
      {% do craft.app.response.cookies.add(create({
          class: 'yii\\web\\cookie',
          name: 'order',
          value: order,
      })) %}
  {% endif %}
  
  ```
  
  Note that getting and setting cookies is easier using the [Cookies](https://plugins.craftcms.com/cookies) plugin.
  
  ```
  {% set order = getCookie('order') %}
  
  ```
  
  ```
  {% set order = order ?? '' %}
  {% if order %}
      {% do craft.cookies.set('order', order) %}
  {% endif %}
  
  ```
  
  > **Comments:**
  > **username_0**: Thanks Ben, love Sprig. I'll pop it through Cookies ~ I actually thought it'd be easier via localstorage but twig's cookies works too.  
  
  ---
  
  