3

まず第一に、私は宿題を終えたと言いたいです。ページのリロード後に JavaScript の設定を保持することは想定されていないことを理解しています。

また、これを行う方法を 3 つ見つけました
。1. Cookie
2. html ローカル ストレージ
3. Ajax

HTMLローカルストレージを使用してこれを達成しようとした後、数日間あきらめました。HTMLインターフェース全体をキャッシュできるこのチュートリアルを見つけました- 「インターフェース全体のキャッシュ」を参照してください。私はこの方法を使用してある程度の進歩を遂げましたが、最終的には失敗しました.

これは私のフィルター化コードです:

<script type="text/javascript">
$(function() {
    var container = $("#itemListLeading"),
        pagination = $("#pagination");

    function setLazyLoad () {
        container.find("img").lazyload({
            event : "turnPage",
            effect : "fadeIn"
        });
    };

    function setPagination () {
        pagination.jPages({
            containerID : "itemListLeading",
            perPage : 9,
            direction : "auto",
            animation : "fadeInUp",
            previous  : "a.jprev",
            next      : "a.jnext",
            callback : function( pages, items ){
                items.showing.find("img").trigger("turnPage");
                items.oncoming.find("img").trigger("turnPage");
            }
        });
    };

    function destroyPagination () {
        pagination.jPages("destroy");
    };



    setLazyLoad();
    setPagination();

    var ft = $.filtrify("itemListLeading", "placeHolder", {
        close: true, // Close windows after tag select
        block : "data-original",
        callback: function ( query, match, mismatch ) {

            if ( mismatch.length ) $("div#reset").show(); // Show Reset
            else $("div#reset").hide();

            $('.ft-label').parent() // Hide unrelated tags
                .find('li[data-count=0]').hide().end()
                .find(':not(li[data-count=0])').show().end();

            $(".ft-selected li").css("display","inline-block"); // small tag display fix

            destroyPagination();
            setPagination();

        }
    });

    $("div#reset span").click(function() { // Make reset button clickable
        ft.reset();
    }); 
}); 
</script>

これは、ローカルストレージの実装での私のショットでした:

 $(function() {
  var edit = document.getElementById('filter-menu');
  $(edit).blur(function() {
        localStorage.setItem('todoData', this.innerHTML);
        });

  // when the page loads
  if ( localStorage.getItem('todoData') ) {
        edit.innerHTML = localStorage.getItem('todoData');
        }

  $("#reset span").click(function() { // Reset cache button
      localStorage.clear();
      location.reload();
  });   
});

私が経験した問題: 1.キャッシュ
が常に機能するとは限りませんでした (.click 関数を使用すると、より良い結果が得

られました) 3. リセット ボタン (コードの最後の段落) を使用してキャッシュをリセットできませんでした (リロードが機能しました)

。firebuglocalStorage.clear(); location.reload();コンソールにコピーしたときにキャッシュがリセットされました。

4

2 に答える 2

1

filtrify コールバック関数内で、queryローカル ストレージなどに文字列として保存する必要があります。

localStorage.setItem('ftquery', JSON.stringify(query))

次に、filtrify をインスタンス化した後、クエリを「トリガー」する必要があります

ft.trigger(JSON.parse(localStorage.getItem('ftquery')));

したがって、コード例を使用するには、次のように filtrify セクションを編集します。

var ft = $.filtrify("itemListLeading", "placeHolder", {
    close: true, // Close windows after tag select
    block : "data-original",
    callback: function ( query, match, mismatch ) {

        // save query to localStorage
        localStorage.setItem('ftquery', JSON.stringify(query));

        ...

    }
});

// retrieve query from localStorage
if (localStorage.getItem('ftquery')) {
    ft.trigger(JSON.parse(localStorage.getItem('ftquery')));
}
于 2013-10-02T19:52:18.357 に答える