JQueryをリフレッシュした後、最後に選択したオプションを選択したままにする

Question

車のリストと車のブランドを含む選択リストと「すべて」というオプションを選択すると、ブランドに基づいて自動車がフィルタリングされます。 たとえば「メルセデス」を選択すると、メルセデスの車のみが表示され、すべてを選択すると、すべての車が表示されます。 （それはすべてうまく動作します）。

私はページをリフレッシュするときに、私が選択した最後のオプション（リフレッシュ前）に基づいてリストをフィルタリングし、すべてのリストを再びフィルタリングしないようにしたい。 サーバー側の作業を必要とせずにクライアント側でこれを行う方法があるのだろうかと思います。 私の質問は、 "onchange"機能についてではなく、最後に選択したオプションを保存することであることを言及する必要があります。

Answer 1

あなただけそれがsessionStorage apiを使用し、その後、ページの更新ではなく、別のブラウザセッション間で保持する必要がある場合：

// When changing the filter 
var filter = 'Mercedes'; 
sessionStorage.setItem('last-filter', filter); 

// When loading the page (document.ready) 
var filter = sessionStorage.getItem('last-filter') || 'all'; 
if (filter !== 'all') { 
    changeFilter(filter); // your function 
} 

文字列のみを直接保存することができます。要素を格納する代わりに、代わりにその要素のID /クラスを格納します。他のオブジェクトを格納するには、データにJSON.stringify関数を使用して文字列にシリアライズします。

フィルタがブラウザクラッシュなどで持続するようにする場合は、互換性のあるlocalStorage apiを簡単に切り替えることができます。 localstorageのアイテムには特定の有効期限がありません。有効期限が切れた場合は、失効したアイテムを自分で検出して削除するためにフィルタ日付を保存する必要があります。