Javascript 如何使此链接列表受Cookie支持？_Javascript_Jquery

Javascript 如何使此链接列表受Cookie支持？

javascript jquery

Javascript 如何使此链接列表受Cookie支持？,javascript,jquery,Javascript,Jquery,我正在尝试为我的网站创建一个个人链接框，以便我的访问者可以将他们最喜欢的10个链接添加到一个链接框中我已经走到了可以添加和删除链接的地步，但我真正要做的是如何将其保存到用户cookie中，以便用户返回网站时能够记住前10名还有，是否可以使用jQuery添加拖放功能，让用户对链接位置进行排序 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/htm

我正在尝试为我的网站创建一个个人链接框，以便我的访问者可以将他们最喜欢的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>


-JSFIDLE演示
正文{字体大小：11px；字体系列：Arial，Helvetica，无衬线；}
#链接列表img{宽度：12px；高度：12px；}
#linklist.link{padding:5px4px5px5px；border bottom:1px solid#EFEFEF；}
#linklist.link:hover{background:#f7f7f7；}
#linklist.link_add{}
#链接列表输入[type=“text”]{填充：8px；边框半径：2px；边框：1px实心#CCC；宽度：270px；}
// 9) {
警觉（‘直到你离开我，我离开安德烈街！’；
返回；
}
$（'.link'）.last（）
.after（$（''，{'class'：'link'}）
.append（“”）
.append（“”）
.预编(
$（''，{style:“float:left”}）
.append（$（'
添加标题和URL:

使用HTML5而不是cookies

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

在onclick函数（或任何将更改列表的事件）中，您需要跟踪列表中当前的内容

你可以这样做

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

正如Robin指出的，您可能需要使用localStorage。不管怎样，我们的想法是希望整个列表存储在客户端的某个位置，所以只要列表发生更改，就保存它

您还需要序列化对象以便签出。

这听起来很不错！byt我对这方面很在行。您能帮我将其集成到代码中吗？我自己尝试过，但无法实现work@Demilio：将问题中不需要的html减少到理解问题所需的任何内容。用您尝试过的内容更新它，以便我们可以更新我们的答案。

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