Quiero hacer que la barra lateral en la vista móvil no se desespere después de actualizar la página cuando el usuario la cierra manualmente.
El usuario puede obtener la barra lateral presionando el ícono de hamburguesa. Puede filtrar los productos desde allí, pero la pregunta es que los datos del filtro del usuario se mueven a la página siguiente o recargan y ocultan la barra lateral. Quiero que no esté oculta hasta que el usuario la cierre en una página nueva o una página actualizada. ...
¿Cómo puedo hacerlo?
aquí está el código
<!-- this (.mobile-filter-sidebar) part will be position fixed in mobile version --> <div class="col-md-3 page-sidebar mobile-filter-sidebar pb-4" id="sidebar"> <aside> <div class="sidebar-modern-inner enable-long-words"> <div> <form action="{{url('filteradsbypackages')}}" method="get" enctype="multipart/form-data"> @foreach($data as $packages) <div class="form-check col-12 gap"> <input class="form-check-input" type="checkbox" id="featuredChk" name="promoTypeFilter" value="{{$packages->id}}" onchange="this.form.submit()"> <label class="form-check-label" for="featuredChk"> <label class="filter_doorstep">{{t($packages->short_name)}}</label> </label> </div> @endforeach </form> </div> @includeFirst([config('larapen.core.customizedViewPath') . 'search.inc.sidebar.fields', 'search.inc.sidebar.fields']) @includeFirst([config('larapen.core.customizedViewPath') . 'search.inc.sidebar.categories', 'search.inc.sidebar.categories']) @includeFirst([config('larapen.core.customizedViewPath') . 'search.inc.sidebar.cities', 'search.inc.sidebar.cities']) @if (!config('settings.list.hide_dates')) @includeFirst([config('larapen.core.customizedViewPath') . 'search.inc.sidebar.date', 'search.inc.sidebar.date']) @endif @includeFirst([config('larapen.core.customizedViewPath') . 'search.inc.sidebar.price', 'search.inc.sidebar.price']) </div> </aside> </div> @section('after_scripts') @parent <script> var baseUrl = '{{ request()->url() }}'; </script> @endsectionCuando el usuario abre la barra lateral, puede establecer una variable (por ejemplo: isSideBarOpen) en su almacenamiento local en "verdadero".
window.localStorage.setItem(isSideBarOpen","true")si el usuario lo cierra, lo establece en "falso"
window.localStorage.setItem(isSideBarOpen","false")cada vez que el usuario cargue tu aplicación, comprobarás
if(window.localStorage.getItem("isSideBarOpen") === "true") { // your logic to open/close SideBar }Creo que es mejor almacenar todos los datos relacionados con el estado de la página.
Puede almacenarlo en localStorage o evento en su base de datos.
Considerando la siguiente situación:
1- Almacene todos los datos en la base de datos en cada cambio => [es posible que tenga muchas solicitudes de estado de actualización para cada usuario]
2- Almacene todos los datos en localStorage => Guárdelos en la base de datos periódicamente mediante un temporizador o guarde los datos cuando ocurra una acción específica. [Como ejemplo cuando el usuario cierra la sesión, almacene datos en DB]
Para hacer esto puedes escribir un Javascript o Jquery
function updateSate(args= {}) { let sate = { isSideBarOpen: documents.getElementById or get it from args, ...otherdata } //store it in localStorage using localStorage.setItem('state', JSON.stringify(state)); } //call storeState to save localStorage in DB function storeState() { send request to save it } //Read the page state from localStorage when page is loaded