jQuery cookie：如何保存用户下次访问的颜色选择？

Question

我正在研究jQuery预定义的颜色选择器。 当用户单击我的颜色选择器的一种颜色时，我想保存颜色选择： http : //prntscr.com/7rnafa 。 为了与Cookie进行交互，我在https://github.com/carhartl/jquery-cookie上使用jQuery插件。

jQuery代码：

var color_elements_background = ".nodeList .categoryStrip, .breadcrumb";

var color_elements_text = "a:link, a:visited";

$(".colorPicker span").on("click", function()
{
    var customColor = $(this).attr("custom_color");
    $(color_elements_background).css("background-color", customColor);
    $(color_elements_text).css("color", customColor);
});
});

我的颜色选择器的HTML：

                <div class="colorPicker">
                    <div class="colorPickerContent">
                        <div class="colorPickerItems">
                            <li>
                                <span custom_color="#FF0000">Color 1</span>
                            </li>
                            <li>
                                <span custom_color="#333333">Color 2</span>
                            </li>
                            <li>
                                <span custom_color="#FFFFFF">Color 3</span>
                            </li>
                            <li>
                                <span custom_color="#D0D0D0">Color 4</span>
                            </li>
                            <li>
                                <span custom_color="#CCCCCC">Color 5</span>
                            </li>
                        </div>
                    </div>
                </div>

Answer 1

参见插件：

https://github.com/js-cookie/js-cookie

要使用Javascript库js.cookie保存cookie，请使用：

Cookies.set("color", customColor);

同样从保存的cookie中获取值的方法是：

var customColor = Cookies.get("color");

如果您想删除该Cookie，则可以使用：

Cookies.remove("color");

Answer 2

使用Cookie库存储先前的选择，并使用$（document）.ready（function（）{}）填充DOM。

如果您的cookie没有保存，请确认已设置cookie的域。 设置cookie时，cookie域通常与您的网站不匹配。 请注意，如果您使用http：// localhost ，则cookie不会保存。 使用Chrome开发人员工具中的“资源”标签来确认您的Cookie已设置。

ps如果您希望某人为您完成工作，请考虑使用freelancer.com或odesk。