Javascript 如何使用html5 localstorage存储列表的顺序？_Javascript_Jquery_Html_Local Storage

Javascript 如何使用html5 localstorage存储列表的顺序？

javascript jquery html

Javascript 如何使用html5 localstorage存储列表的顺序？,javascript,jquery,html,local-storage,Javascript,Jquery,Html,Local Storage,我有一个无序的列表，可排序的jquery ui，我想知道如何在列表中拖动后存储它的位置。当用户刷新页面时，停留在它被拖动的位置以下是我的例子： <!DOCTYPE html> <head> <title>Untitled Document</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jque

我有一个无序的列表，可排序的jquery ui，我想知道如何在列表中拖动

后存储它的位置。当用户刷新页面时，

停留在它被拖动的位置

以下是我的例子：

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
    href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
</head>

<body>
<ul id="uli">
  <li id="lit1" class="ui-state-default" style="width:100px; height:100px; list-style-type:none"><div>1</div></li>

  <li id="lit2" class="ui-state-default" style="width:100px; height:100px; list-style-type:none"><div>2</div></li>

  <li id="lit3" class="ui-state-default" style="width:100px; height:100px; list-style-type:none"><div>3</div> </li>

</ul>


<script>

$(function() {
    $( "#uli" ).sortable();
    $( "#uli" ).disableSelection();
  });

</script>
</body>
</html>


无标题文件

1
2
3

$（函数（）{
$（“#uli”）.sortable（）；
$（“#uli”）.disableSelection（）；
});

$( "#uli" ).sortable({
  update: function( event, ui ) {
    var sorted = $( this ).sortable( "serialize", { key: "sort" } );
    localStorage['sorted'] = sorted ;
  }
});