将多个选定项目保存在cookie上

我试图将用户选择的项目保存在cookie上，当他们在另一个页面上导航或刷新页面时，他们的首选项被保存。所选择的项目也被克隆在一个不同的DOM元素，我不确定我是否做它合规。目前，我只能保存一个项目，我希望能够保存多个项目。

jQuery(document).ready(function() {
    var cookieName = 'franchiseSelected',
        cookieOptions = {expires: 7, path: '/'};
    $('input[name="' + $.cookie(cookieName) + '"]').attr("checked","checked").parent('li').clone().appendTo("#selected_items");
    $("input[type=checkbox]").click(function() {
        // $("#" + $.cookie(cookieName)).removeClass("selectedLanguage");
        $.cookie(cookieName, $(this).attr('value'), cookieOptions);
        $("#" + $.cookie(cookieName)).addClass("selectedLanguage");
        $(this).parent('li').clone().appendTo("#selected_items")
    });
});    

<h2>Select Item</h2>
<ul class="items">
    <li> <input name="dog" value="dog" type="checkbox" /> <span>Dog</span> </li>   
    <li> <input name="cat" value="cat" type="checkbox" /> <span>Cat</span> </li>   
    <li> <input name="bird" value="bird" type="checkbox" /> <span>Bird</span> </li>   
    <li> <input name="donkey" value="donkey" type="checkbox" /> <span>Donkey</span> </li>   
</ul>
<br>
<h2>Selected Items</h2>
<ul id="selected_items"></ul>

查看我的小提琴:http://jsfiddle.net/Eh22C/