缓存单选按钮jquery

Question

I have this code:

@if (isset($isModelTranslatable) && $isModelTranslatable)
<div class="language-selector">
    <div class="btn-group btn-group-sm" role="group" data-toggle="buttons">
        @foreach(config('voyager.multilingual.locales') as $lang)
            <label class="btn btn-primary{{ ($lang === config('voyager.multilingual.default')) ? " active" : "" }}">
                <input type="radio" name="i18n_selector" id="{{$lang}}" autocomplete="off"{{ ($lang === config('voyager.multilingual.default')) ? ' checked="checked"' : '' }}> {{ strtoupper($lang) }}
            </label>
        @endforeach
    </div>
</div>
@endif

I want do. If people click on radio button, remember this radio, and when reload page, do active radio button, which he selected. How I can do this? I can do with laravel cache? Or I need use jQuery caching?

Answer 1

jQuery doesn't have caching built in, but localStorage, like @Pete mentioned in the comments, is a good option. If you want to store data with Laravel, I'd suggest using an Eloquent model over caching, as it makes it easier (in my opinion) to associate unique data with a specific site visitor. (This is also assuming you have some sort of user login system preexisting.)

If you do choose to go the Laravel route, you'll have to send data over to your server when a user makes a selection, and then store it on the Laravel side. Research the fetch API or just make a simple HTML form.

For the most basic solution, localStorage remains your best bet. It's JavaScript-powered and stored on the client side, so you don't have to worry about cross-contaminating saved data or even storing data on your server at all. Wins all around! Take a look at this related answer on saving input states with localStorage, and let us know once you run into a specific issue.