Question

我需要能够检索浏览器控制台中显示的请求URL列表，即：GET http://mydomain.com/index.php?p=1&curr=GBP&cat=Food. 200。用户可以点击我的应用程序并应用不同的过滤器并滚动浏览页面，我需要一些跟踪方法，以便我始终知道已为该用户会话加载了哪些数据。

我曾考虑使用PHP $_SERVER['REQUEST_URI']并将它们保存在会话中，但后来我不知道如何从我的JQuery访问此会话作为构建URL的JQuery。

有谁知道如何从控制台访问这些数据？这可能吗？如果没有，任何人都可以建议解决方法吗？

到目前为止我的PHP / JQuery混乱：

<?php
    session_start();                   
    //keep track of requests.
    if (!isset($_SESSION['requests'])) {
        $_SESSION['requests'] = array();
    } else {
        if (!in_array( $_SERVER['REQUEST_URI'], $_SESSION['requests'])) { 
            $_SESSION['requests'][] = $_SERVER['REQUEST_URI'];
        }
    }
    $requests = json_encode($_SESSION['requests']);

    print_r($_SESSION['requests']);
    print_r($requests);  //these both have values
?>

//further down the page is the javascript
$('.filter a').click(function(e) {
    var $this = $(this);
    var $optionSet = $this.parents('.option-set');
    var group = $optionSet.attr('data-filter-group');
    filters[ group ] = $this.attr('data-filter-value');
    //***more code for filtering etc******/

    var paginate_url = $('.paginate a').attr('href');

    //THIS IS PART I CANNOT GET WORKING
    var visited_urls= <?=$requests?>;
    //console.log($.parseJSON(visited_urls));

    console.log(visited_urls); //is always empty
    var pageno = '';  //somehow check to see if the URL that has been clicked exists int he requests array, if so get the page number and increment.

    var next_url = UpdateQueryString(paginate_url, pageno, group, encodeURIComponent(filter_qry));

Answer 1

这是我的建议：

PHP + Javascript实施：

在PHP中，使用$ _GET ['curr']和$_GET['cat']从网址中检索争论。
使用$_SESSION['curr'] = $_GET['curr'];按会话保存。
在您的Javascript / jQuery上使用var curr = "<?php echo $_SESSION['curr']; ?>"使您的Javascript可以使用PHP会话变量。

基本上，拥有良好的PHP / Javascript持久内存的关键是你可以使用以下方法将PHP内容设置为Javascript变量：

var x = <?php echo '123';?>;
console.log(x); //output '123' to Javascript console

如果您需要列出所有访问过的网址，可以将它们保存在PHP数组中并将其传输到Javascript。

在PHP方面：

  if (!isset($_SESSION['visited'])) $_SESSION['visited'] = array();//initialize the array if doesn't exist

  if (!inarray( $_SERVER['REQUEST_URI'], $_SESSION['visited']) { //check if current URL is not in array
     $_SESSION['visited'][] = $_SERVER['REQUEST_URI'];//push it to the array
  }

在客户端：

 //this will convert the PHP array to a Javascript array using json_encode
  var visited_urls= <?php echo json_encode($_SESSION['visited']); ?>;

不要忘记在需要会话变量的每个页面上使用session_start（）。

仅限Javascript实施：

使用localStorage并将所有内容保留在客户端。

编辑：请注意，仅在IE8及更高版本中支持localStorage，因此如果必须支持IE8之前的版本，则需要使用Cookie而不是localStorage。

$(document).ready(function() {
   var urls = JSON.parse(localStorage["visited"]) || [];//get the visited urls from local storage or initialize the array

   if (urls.indexOf(document.URL) == -1) {//if current url does not exist in the array
    urls.push(document.URL);//add it to the array
    localStorage["visited"] = JSON.stringify(urls);//save a stringifyed version of the array to local storage
   }

});

希望这有帮助！

Answer 2

我不完全确定你要做什么，但我认为你可以跳过PHP，只使用JavaScript和sessionStorage：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#sessionStorage或localStorage：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage（取决于你的持久性）想要数据）

例如，如果我想听取'a'标签上的所有点击并跟踪是否已访问过这些href（以及多少次）

$(document).ready(function() {
    // store an empty object in session storage when the page loads
    sessionStorage.visited = JSON.stringify({});
});

$('a').on('click', function() {
    var storage = JSON.parse(sessionStorage.visited),
        href = $(this).attr('href');

    // when we get a click check to see if this has been clicked before
    if (!storage[href]) {
        // if not save it and set the count to 1
        storage[href] = 1;
    } else {
        // otherwise increment the count
        storage[href]++;
    }

    sessionStorage.visited = JSON.stringify(storage);
});

如果你想从你的ajax调用中保存url，同样的原则适用但是要监听ajaxSuccess事件并在回调中存储请求中的url：http://api.jquery.com/ajaxSuccess/

Answer 3

目前还不清楚您希望通过此功能实现什么目标。你说：

用户可以点击我的应用并应用不同的过滤器并滚动浏览页面，我需要一些跟踪方法，以便我始终知道已为该用户会话加载了哪些数据。

你想用这个来实现什么，为什么浏览器的缓存不足以满足你的要求？我对解决方案的想法是通过某种WebSocket（http://en.wikipedia.org/wiki/WebSocket）将服务器会话数组与浏览器内的对象同步。

<强> UPDATE2 ：可以使用localStorage作为缓存存储，如Abel Melquiades Callejo建议的那样，然后绕过HTTP请求从中读取。我会选择以不同方式保存到该缓存的内容，不涉及任何服务器：

为要缓存的每个HTML元素添加自定义属性data- *（http://html5doctor.com/html5-custom-data-attributes/）;
为具有该属性的所有HTML元素创建querySelectorAll（https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll）;
现在应该很容易从localStorage存储和检索文档，你需要一个命名文件的约定以便于查找;
存储图像意味着进行base64转换，将数据大小增加34％（64kb的图像在localStorage中占用86kb）。
您需要一种方法来查找localStorage中的数据何时过时，并且您需要向服务器发出请求（可能还有另一个data-age属性来指定它何时到期）。

但是，此localStorage解决方案仅限于少量数据，请参阅此问题https://github.com/RemoteStorage/remoteStorage.js/issues/144。所以，虽然我现在看到你问的是可能的，因为localStorage的这个大小限制，我强烈推荐我的UPDATE1中的解决方案。

UPDATE1 ：重点是缓存机制非常复杂。更好的选择是使用默认的浏览器缓存机制：

1。 HTML5缓存清单

使用应用程序缓存离线 http://html5doctor.com/go-offline-with-application-cache/
让我们离线http://diveintohtml5.info/offline.html
使用应用程序缓存 https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
使用应用程序缓存的初学者指南http://www.html5rocks.com/en/tutorials/appcache/beginner/

2。服务器对HTTP请求的响应标头

优化缓存 - 利用浏览器缓存 https://developers.google.com/speed/docs/best-practices/caching#LeverageBrowserCaching
HTTP缓存常见问题https://developer.mozilla.org/en/docs/HTTP_Caching_FAQ

Jquery / Javascript - 获取该会话的请求URL列表，如在浏览器控制台中

3 个答案:

1。 HTML5缓存清单

2。服务器对HTTP请求的响应标头