客户端数据服务器端的单页刷新-CSDN博客

更新：我有一篇较新的文章“服务器端芥末切面” ，涵盖了相同的方面，并且解决了许多问题。这可能是一个更好的阅读。

最近，我们介绍了如何获取客户端信息并使之在服务器端可用。在客户端上进行实际测试，例如测量浏览器窗口宽度并进行功能测试。然后将该数据保存到Cookie。然后，下次加载该页面时，您会将这些数据存储在cookie中。

我非常喜欢这种技术，并且可以使用它，但是如果您真的想在用户看到的第一页上使用该信息，该怎么办？您可能需要刷新页面，但必须保持安全。

您可能会很想测试是否设置了cookie，如果没有，则设置它并重新加载。这里的PHP和jQuery仅用于演示目的，但是您可以（而且我已经）使用任何其他后端语言（带有或不带有前端库）来完成此操作。

<?php if (isset($_COOKIE['_clientInfo'])) { ?>

  <script>
    // Do tests, set cookie

    location.reload(true); // true means don't use cache
  </script>

<?php } else { ?>

  <!-- Proceed normally, using cookie data to make more choices -->

<?php } ?>

但是，这非常危险。 因为：

用户可能故意禁止cookie。
用户可能正在使用不允许cookie的浏览器。

据我所知，包含WebView的iOS应用需要专门启用接受cookie的功能，这意味着默认设置是不允许它们。

如果以上两个条件中的任何一个是正确的，您将陷入无限重载的情况，这是非常糟糕的。

这里的窍门就是这样处理：

测试cookie是否在服务器端存在。
如果未设置Cookie，请在客户端将其设置为所需的数据。
然后，在浏览器是否支持cookie的情况下，在客户端进行另一项测试。
如果它确实支持cookie，并且您还没有使用过它（ cookieUsed ），请刷新。

这是一个完整的文档，显示了它可能会如何运行：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset='UTF-8'>
  <title>Client Info In Cookie</title>
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>

<body>

    <?php if (isset($_COOKIE['_clientInfo'])) { ?>

      <p>Use the data as you see fit!</p>

      <?php
          $json = $_COOKIE['_clientInfo'];
          $obj = json_decode(stripslashes($json));
          echo "<p>Browser Width: " . $obj->{'browserWidth'} . "</p>";
          echo "<p>Browser Height: " . $obj->{'browserHeight'} . "</p>";
          echo "<p>Flexbox Support: " . $obj->{'flexboxSupport'} . "</p>";
          echo "<p>SVG Support: " . $obj->{'SVGSupport'} . "</p>";
      ?>

      <p>You can use it server-side OR client-side.</p>

      <script>
        // You could use the plugin here too, but whatever this is lighter
        var clientInfo = JSON.parse('<?php echo $_COOKIE['_clientInfo']; ?>');

        output = "<p>Browser Width: " + clientInfo.browserWidth + "</p>";

        $("body").append(output);
      </script>

    <?php } else { ?>

      <!-- LOAD TESTING LIBRARY, only load when testing -->
      <script src="js/modernizr.js"></script>

      <!-- COOKIE LIBRARY -->
      <script src="js/jquery.cookie.js"></script>

      <!-- CREATE COOKIE -->
      <script>

        var clientInfo = {
          browserWidth: $(window).width(),
          browserHeight: $(window).height(),
          flexboxSupport: Modernizr.flexbox,
          SVGSupport: Modernizr.svg
        };

        var cookieVal = JSON.stringify(clientInfo);

        // was using document.cookie, this plugin worked better
        $.cookie("_clientInfo", cookieVal, {
          expires: 7
        });
      </script>

      <!-- RELOAD PAGE if supported and not used -->
      <script>
        var cookiesEnabled = navigator.cookieEnabled ? true : false;
        if (cookiesEnabled) {
          location.reload(true);
        }
      </script>

      <p>Make sure you serve useful content here as well.</p>

    <?php } ?>

</body>

</html>

现场演示。

您可能需要稍微弄乱该结构以适合您的需求。重要的是无论结果如何，您都可以提供有用的内容。然后可能发生的最坏情况是，您一直试图设置一个cookie，在没有cookie的环境中，这些cookie永远不会为那些用户设置。您致电那是可以接受的。

您可以使用Detector之类的工具进行更强大的测试。

我们在CodePen上使用了此功能（截至此更新，2014年12月），并对其进行了改进。