Question

我有三个按钮可以为我的网址添加参数 - 如下所示：

<a class="click1">/a> = ?param=grid
<a class="click1">/a> = ?param=smallgrid
<a class="click1">/a> = ?param=largegrid

这些按钮显示三种不同的布局 - 第一种设置为默认布局。

我想将用户选择放在cookie中 - 但我只需要将url添加到相关页面中。

网址如下：

 /products/Computers/Notebooks?param=list

所以我希望cookie能够根据url has / products执行选择，甚至更好 - 如果可能的话，还需要一个body类。

我已将jquery.cookie.js插件添加到我的网站 - 但我无法弄清楚如何使用它。

Answer 1

This SO answer显示了JQuery Cookie库的一个非常基本的用法。基本上使用的是$.cookie(<cookie-key>, <cookie-value>, {<additional data about cookie>})。（这显然是伪代码）。这会将一个键/值cookie写入浏览器，该cookie将持续您指定的时间，可以通过$.cookie("<cookie-key>")获取并通过$.removeCookie("<cookie-key>")删除。

因此，对于您的用例，它可能如下所示：

HTML
<a id="gridbtn" class="click1"></a>
<a id="smallgridbtn" class="click1"></a>
<a id="largegridbtn" class="click1"></a>

// JQuery
$(document).ready(function() {
    // After page load
    var cookieLayoutValue = $.cookie("layout");

    console.log("The cookie value was " + cookieLayoutValue);

    if (cookieLayoutValue === "grid") {
        // process "grid" layout
    } else if (cookieLayoutValue === "smallgrid") {
        // process "smallgrid" layout
    } else if (cookieLayoutValue === "largegrid") {
        // process "largegrid" layout
    } else {
        // cookie doesn't exist, default it to grid
        $.cookie("layout", "grid", { expires : 999 });
       // process "grid" layout
    }

    //
    // call layout code for whatever the value is using if/else
    //

    // Wire up some click handlers
    $("#gridbtn").click(function() {
        var layout = $.cookie("layout");
        $.cookie("layout", "grid", { expires : 999 });

        // If the layout has changed
        if (layout !== "grid") {
            // Do "grid" layout processing
        }            
    });

    // Wire up some click handlers
    $("#smallgridbtn").click(function() {
        var layout = $.cookie("layout");
        $.cookie("layout", "smallgrid", { expires : 999 });

        // If the layout has changed
        if (layout !== "smallgrid") {
            // Do "smallgrid" layout processing
        }            
    });

    // Wire up some click handlers
    $("#largegridbtn").click(function() {
        var layout = $.cookie("layout");
        $.cookie("layout", "largegrid", { expires : 999 });

        // If the layout has changed
        if (layout !== "largegrid") {
            // Do "largegrid" layout processing
        }            
    });
});

否则，您必须将您想要的信息发送到服务器进行处理。我建议通过Spring Framework提供RESTful服务，然后在回复like this中设置Cookie。

如何使用jQuery和自定义url参数的cookie

1 个答案: