<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>

CC BY-SA 4.0
2024-04-12T13:51:23.580Z
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.
JMKelley
CC BY-SA 4.0
2024-04-12T13:49:33.433Z
2024-04-12T13:52:31.973Z
2024-04-12T13:52:31.973Z
Ben Croker
<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>

<plugin-sprig><craft5>
Local Storage with Sprig
# 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() %}


    Product Number
    Title Ascending


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 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.  

---

