Jquery BBQ -检测当用户点击后退按钮

Question

我已经成功地实现了jQuery BBQ插件来构建一个快速原型，但是我有一个与我的特定设置相关的小问题:

• 其中一个页面"#catalog"包含一个使用函数"randomItems()"随机生成的项目网格。，触发hashchange(当来自另一个页面时)。
• 用户然后点击网格中的任何一个项目来查看#detailspage。在点击浏览器后退按钮，我希望用户查看#目录页面(这工作得很好)，但防止页面生成一组新的随机项目onload(所以保留任何项目最后显示)。

是否有一种方法知道用户已经点击后退按钮，所以在这种情况下，我不触发"randomItems()" 函数?

Answer 1

您需要将randomItems()中的项放入缓存中:

// save your records here in the cache
var items = [];
$(window).on('hashchange', function(){
    var page = window.location.hash.replace(/^#/, '');
    // check first if items has already records in it and check if page is #catalogue
    // if not then call randomItems()
    if (page === 'catalogue' && items.length === 0) {
        items = randomItems();
    }
    // your code here follows
});

Answer 2

使用浏览器的本地存储来保存项目。首先创建对象的javascript表示。然后将其存储在localStorage中。在页面加载时检索。注意，您必须对复杂对象进行字符串化以存储它，因为存储只接受键值对

这里有一个通用模式

var foo;
window.onpageload = function(){
   if(localStorage["foo"] == '' | localStorage["foo"] == undefined){
     foo = getrandomItems(); //possibly an ajax call;
     localStorage["foo"] = JSON.stringify(foo);
   else{
     foo = JSON.parse(localStorage["foo"]);
   }
};

参见http://diveintohtml5.info/storage.html和在HTML5 localStorage中存储对象的详细信息

Answer 3

相信bbq允许您设置和获取url参数，您可以使用这些来确定是否需要随机化。当用户单击链接到目录时，url类似于:

http://yoururl.com/#catalog

所以这是目录的"根"url每当url是这个你随机化项目，在随机化项目之后你添加一个参数到url所以它变成了说:

http://yoururl.com/#catalog?r=1

这样，当用户离开并查看一个项目，然后单击返回历史url将包含r=1，因此您不处理随机函数。

function randomiseItems()
{
  // we do not want to randomise
  if(urlParamIsSet("r")) return; 
  // set url param so gets stored in history (replacing current url)
  urlSetParam("r",1); 
  //-- do your code here
}

代替urlParamIsSet/urlSetParam使用bbq提供的任何函数来操作url