Question

我正在尝试为我的网站创建一个个人链接，以便我的访问者可以将他们最喜欢的10个链接添加到一个框中。

我到目前为止可以添加和删除链接，但我真正在努力的是如何将其保存到用户cookie中，以便当用户回到网站时它会记住顶部10个名单？

并且，是否可以使用jQuery添加拖放功能，让用户对链接进行排序？

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
   body { font-size:11px; font-family:Arial, Helvetica, sans-serif;}
#linklist img {width:12px; height:12px;}
#linklist .link {padding:5px 4px 5px 5px; border-bottom:1px solid #EFEFEF;}
#linklist .link:hover {background:#f7f7f7;}
#linklist .link_add {}
#linklist input[type="text"] {padding:8px; border-radius:2px; border:1px solid #CCC; width:270px;} 
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function() {
    $('#linklist').on('click',  '.link img', function() {
        if (confirm('Vil du virkelig slette denne lenken ?')) {
            $(this).closest('.link').remove();
        }
    });

    $('#submit').on('click', function() {
        if ($("#lenke").val() == '' || $('#tittel').val() == '') {
            alert('Begge feltene må fylles ut!');
            return;
        }
        if ($('.link').length > 9) {
            alert('Du kan kun legge til ti lenker, slett noen av de andre først !');
            return;
        }
        $('.link').last()
                  .after($('<div />', {'class':'link'})
                  .append('<div style="float:right;"><img src="images/cross.png" /></div>')
                  .append('<div style="clear:both;"></div>')
                  .prepend(
                      $('<div />', {style:"float:left"})
                               .append($('<a />', {href: $("#lenke").val(), text: $('#tittel').val()}))
                  ));
        $('#lenke, #tittel').val('');
    });
});
});//]]>  

</script>


</head>
<body>

<div style="width:300px;">
<h3>Personlige linker</h3>
<div id="linklist" class="frame">

<div class="link">
<div style="float:left;"><a href="#">Jakt og Fiskebutikken</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div class="link">
<div style="float:left;"><a href="#">Maritim.no</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div class="link">
<div style="float:left;"><a href="#">Dagbladet.no</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>


<div class="link">
<div style="float:left;"><a href="#">Spillguide</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div class="link">
<div style="float:left;"><a href="#">Båtmagasinet</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div class="link">
<div style="float:left;"><a href="#">Pressfire</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div class="link">
<div style="float:left;"><a href="#">VG Nett</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>


<div class="link">
<div style="float:left;"><a href="#">Dagbladet.no</a></div>
<div style="float:right;"><img src="images/cross.png" /></div>
<div style="clear:both;"></div>
</div>

<div style="clear:both;"></div>



<div class="link_add">
<div style="padding:5px;"><strong>Add title and URL:</strong></div>
<input id="tittel" placeholder="Title" type="text" />
<input id="lenke"  placeholder="http://www..." type="text" />
<input id="submit" style="padding:6px;" value="Add link" type="button" />
</div>
</div>
</div>
</body>
</html>

Answer 1

使用HTML5的localStorage代替Cookie。

//to set
localStorage.setItem('sitename#link-name', linkUrl)

//to retrieve values for your site
function fetchMyUrls(){
    var myLinks = [];
    for(var i in localStorage)
    {
        if(localStorage[i].indexOf('sitename') == 0){
           myLinks.push({ i : localStorage[i] });
        }
    }
    return myLinks;
}

Answer 2

在您的onclick功能（或任何会更改列表的事件）中，您需要跟踪列表中当前的内容。

您可以执行类似

的操作

function listChanged(listObject) {
    $.cookie('myList', listObject);
}

正如Robin所指出的，您可能需要使用localStorage。无论如何，想法是你希望整个列表存储在客户端的某个地方，所以只要列表发生变化，就保存它。

您还需要序列化您的对象，以便结帐JSON.parse() and JSON.stringify()。

如何通过cookies支持这个链接列表？

2 个答案: