localstorageを使用してクリック機能でユーザーのレイアウトの設定を保存して取得する

Question

localstorageを初めて使用しましたが、これはユーザーのブラウザで1回レンダリングするために特定のIDまたはCLASSをCSSファイルから保存するために必要です彼らは "グリッド/リスト"のレイアウトを表示するために（クリックイベントで）彼らの選択をしました。 localstorageはここで優先されますか？それとも、 "sessionstorage"を使うのが良いでしょうか？それとも全く別の方法を使うのが良いでしょうか？もしそうなら、何？私が達成しようとしています何

はこれです：1 2のアイコンの ユーザーがクリックする - これらのアイコンは、私が作ったCSSレイアウトのIDやクラスを保存する必要がある（どちらかの「居心地の良い」または「リスト」表示） 。ユーザがウェブサイトの他のページを通過するとき、このプリファレンスは記憶されるので、ユーザがこのページに戻ると、レイアウトは依然として彼/彼女が選択したものと同じである。ユーザーがブラウザを閉じてからそのページに再度開いた場合も同様です。

キャッシュされた時間を追加することも優先されます。たとえば、ユーザーのlocalstorageに「x」の日数のレイアウトを保持してから、その日数をクリアします。

私はこれを始める方法もわからないので、助力をいただければ幸いです。私は数多くの例を見てきましたが、私の頭が彼らのやり方を覆い隠しているように見えることはできません。私が見た例は私のニーズに応えないようです。ここで

は、私がこれまで持っているものです。

JS

// Changing layout 'Cozy' to 'List' 
$('.news_nav-options_list').on('click', function() { 
    var cozy=document.getElementById('hideClass'); 
    cozy.style.display="none"; 

    var list=document.getElementById('showClass'); 
    list.style.display="block"; 

    $(this).addClass('active'); 
    $('.news_nav-options_cozy').removeClass('active'); 
}); 

// Changing layout 'List' to 'Cozy' 
$('.news_nav-options_cozy').on('click', function() { 
    var list=document.getElementById('hideClass'); 
    list.style.display="block"; 

    var cozy=document.getElementById('showClass'); 
    cozy.style.display="none"; 

    $(this).addClass('active'); 
    $('.news_nav-options_list').removeClass('active'); 
}); 

そして、ここでは、私がこれまで持っているもののデモです：

DEMO

私は".setItem（）と.getItem"を使用して読み込み、localstorageが望ましいしかし、再び、私はどのように始めるべきか分かりません。私のjsに現在持っているものにlocalstorageを適用できますか？

Answer 1

これは間違いではありませんが、探している方向で指摘する必要があります。

$(document).ready(function(){ 
    // Changing layout 'Cozy' to 'List' 
    $('.news_nav-options_list').on('click', function() { 
     changeToListView(); 
    }); 

    // Changing layout 'List' to 'Cozy' 
    $('.news_nav-options_cozy').on('click', function() { 
     changeToCozyView(); 
    }); 

    if (typeof(Storage) !== "undefined") { 
     var view = localStorage.getItem("view"); 
     if (view && view == "cozy") { 
      changeToCozyView(); 
     } else if (view && view == "list") { 
      changeToListView(); 
     } else { 
      // view isn't set, or is set to something we don't recognize 
     } 
    } else { 
     // user's browser doesn't support localStorage 
    }   
}); 

function changeToListView() { 
    var cozy=document.getElementById('hideClass'); 
    cozy.style.display="none"; 

    var list=document.getElementById('showClass'); 
    list.style.display="block"; 

    storagePut("list"); 

    $(this).addClass('active'); 
    $('.news_nav-options_cozy').removeClass('active'); 
} 

function changeToCozyView() { 
    var list=document.getElementById('hideClass'); 
    list.style.display="block"; 

    var cozy=document.getElementById('showClass'); 
    cozy.style.display="none"; 

    storagePut("cozy"); 

    $(this).addClass('active'); 
    $('.news_nav-options_list').removeClass('active'); 
} 

function storagePut(view) { 
    if (typeof(Storage) !== "undefined") { 
     localStorage.setItem("view", view); 
    } else { 
     // user's browser doesn't support localStorage 
    }   
}