How to make this linklist supported by cookies?
<p>I´m trying to create a personal linkbox for my website so that my visitors can add they´re top 10 favourite links to a box. </p>

<p>I´ve come so far that its possible to add and remove links but what I´m really struggling with is how can I save this in to the users cookies so that when the user comes back to the website it remembers the top 10 list?</p>

<p>And, is it possible to add a drag&amp;drop function with jQuery to let the user sort the link-possition?</p>

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

  &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.js'&gt;&lt;/script&gt;

  &lt;link rel="stylesheet" type="text/css" href="/css/normalize.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="/css/result-light.css"&gt;

  &lt;style type='text/css'&gt;
   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;} 
  &lt;/style&gt;



&lt;script type='text/javascript'&gt;//&lt;![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 &gt; 9) {
            alert('Du kan kun legge til ti lenker, slett noen av de andre først !');
            return;
        }
        $('.link').last()
                  .after($('&lt;div /&gt;', {'class':'link'})
                  .append('&lt;div style="float:right;"&gt;&lt;img src="images/cross.png" /&gt;&lt;/div&gt;')
                  .append('&lt;div style="clear:both;"&gt;&lt;/div&gt;')
                  .prepend(
                      $('&lt;div /&gt;', {style:"float:left"})
                               .append($('&lt;a /&gt;', {href: $("#lenke").val(), text: $('#tittel').val()}))
                  ));
        $('#lenke, #tittel').val('');
    });
});
});//]]&gt;  

&lt;/script&gt;


&lt;/head&gt;
&lt;body&gt;

&lt;div style="width:300px;"&gt;
&lt;h3&gt;Personlige linker&lt;/h3&gt;
&lt;div id="linklist" class="frame"&gt;

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

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

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


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

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

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

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


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

&lt;div style="clear:both;"&gt;&lt;/div&gt;



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