3

首先我想说我已经完成了我的功课。我知道 javascript 不应该在页面重新加载后保留它的设置。

我还发现了 3 种方法可以做到这一点：
1. Cookies
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 函数得到了更好的结果）

2.当缓存确实有效时，它会缓存过滤器设置的状态（按下按钮），但会显示所有过滤器对象（而不仅仅是那些与过滤器设置有关）

3.我无法使用重置按钮（代码的最后一段）重置缓存（重新加载工作），尽管当我localStorage.clear(); location.reload();在 firebug 控制台中复制时缓存被重置。

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 回答
0

因此，如果您对 javascript 解决方案一无所知，并且您实际上正在使用 jQuery，我会考虑查看 jQuery Cookie 插件 ( https://github.com/carhartl/jquery-cookie )。它非常适合这种情况，并且可能会激发您进一步研究 cookie，例如 php.ini。

如果您决定采用这条路线，那么实施将是直截了当的。你会以与 localStorage 类似的方式处理它：

$(function() {
     var edit = document.getElementById('filter-menu').innerHTML;   
     $.cookie('todoData', edit, { expires: 7 });
});

我已经使用它来实现类似的功能集，并且我相信它在大多数现代浏览器中都能很好地处理。我还建议更具体地抓取每个标签，也许循环遍历每个列表项 (LI)，并用逗号分隔。

于 2013-06-27T21:56:44.897 回答