jQueryUI Sortableリストのソート順をlocalStorageに保存するにはどうすればいいですか？

Question

順不同リストにjQueryUI Sortable関数を使用しています。ソートされた注文をlocalstorageに保存したいと思います。これを行う最善の方法は何ですか？私はアヤックスを考えていたが、どうやってそれを行うのかは分からない。

これまでの私のソースコードです。ここで

<ul id="wrapper"> 
    <li class="grid_section" id="grid1"> 
     <div class="grabber"> 
      <h2>Grid 1</h2> 
     </div><!--/grabber--> 
    </li> 

    <li class="grid_section" id="grid2"> 
     <div class="grabber"> 
      <h2>Grid 2</h2> 
     </div> 
    </li> 

    <li class="grid_section" id="grid3"> 
     <div class="grabber"> 
      <h2>Grid 3</h2> 
     </div>            
    </li> 
</ul>  

は私のjavascriptです：

$(document).ready(function() { 
    $(function() { 
     $("#wrapper").sortable({ 
      update: function() { 
       var order = $("#wrapper").sortable('toArray').toString(); 
       console.log("Sorted : " + order); 
       $("#output").text(order); 

       $.ajax({       
        type: "POST", 
        data: "order=" + order, 
        dataType: "json", 
        success: function (order) { 
         console.log("Success" + order); 
        }, 
        error: function (order) { 
         console.log("Failed" + order); 
        } 
       }) 
      }, 
      placeholder: "ui-state-highlight" 
     }).disableSelection(); 
     }); 
    }); 

私は簡単に順序を確認し、それに出力を持っていますが、今、私はのlocalStorageにその順序を保存する必要があり、それは、ページのロード時に呼び出されることができます。私はlocalStorageがこのための最良の解決策であるとは思わない。

Answer 1

localStorageに保存したい場合は、AJAXの必要はありません。自分で値を直接更新機能に書き込むことができます。

localStorage.setItem("sortOrder", order) 

ページが読み込まれると、リストを初期化するためにlocalStorageから値を取得する必要があります。

var order = localStorage.getItem("sortOrder") 

HTML5 Web Strorage