如何使侧边栏在刷新页面后不隐藏，直到用户手动关闭它

Question

我想让手机视图的侧栏在用户手动关闭刷新页面后不会绝望。

用户可以通过按汉堡包图标获得侧边栏，可以从那里过滤产品，但问题是用户过滤数据，它移动到下一页或重新加载并隐藏侧边栏，我想让它不隐藏，直到用户在新页面或刷新页面关闭它…

我该怎么做?

代码

<!-- 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>
@endsection

Answer 1

当用户打开侧边栏时，您可以在本地存储中设置一个变量(例如:isSideBarOpen)为"true"。

window.localStorage.setItem(isSideBarOpen","true")

如果用户关闭它，则将其设置为"false">

window.localStorage.setItem(isSideBarOpen","false")

每次用户加载你的应用时，你都会检查

if(window.localStorage.getItem("isSideBarOpen") === "true") {
// your logic to open/close SideBar
}

Answer 2

我认为最好存储所有与页面状态相关的数据。

您可以将其存储在localStorage或事件中。

考虑以下情况:

1-在每个change =>[每个用户可能有很多updateState请求]

2-将所有数据存储在localStorage =>通过计时器定期将它们保存在DB中，或者在特定操作发生时保存数据。[以用户注销时数据存储在DB为例]

要做到这一点，你可以编写Javascript或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