使用localStorage保存可排序div的位置/位置

Question

我在嘗試做一個可排序的div設置來保存佈局。我很清楚在這件事上做錯了什麼，或者錯過了一些簡單的事情。 排序工作正常，但保存和加載工作不正常。 當我刷新時，一切都回到原來的狀態，它應該保存選擇的佈局。我有這與jQuery cookie插件有點工作，但我不希望使用它。 我希望有人能幫助我。我已經瀏覽了很多這裏的帖子，但還沒有找到能夠回答我的問題的東西，Google是我的朋友，讓我知道了這一點。但現在我不知所措。

$(function() { 
    $('[id^="sortable"]').sortable({ 
    connectWith: '[id^="sortable"]', 
    helper: "clone", 
    appendTo: ".primary_container", 
    update: function() { 
     $('[id^="sortable"]').children().each(function(){ 
      savePosition($(this).attr("id")); 
     }); 
    } 
    }); 
}); 

function savePosition(id){ 
    var el = $("#" + id); 
    var container = el.parent().attr("id"); 
    var index = el.index(); 
    localStorage.setItem(id, JSON.stringify({ container:container, index:index })); 
} 

function loadPosition(id){ 
    var el = $("#" + id); 
    var position = JSON.parse(localStorage.getItem(id)); 
    console.log(position); 
    var container = "#" + position.container; 
    var index = position.index; 
    if(index == 0){ 
    $(container).prepend(el); 
    }else if($(container).children().eq(index - 1).length == 0){ 
    $(container).append(el); 
    }else{ 
    $(container).children().eq(index - 1).after(el); 
    }  

} 

$('[id^="sortable"]').children().each(function(){ 
    loadPosition($(this).attr("id")); 
}); 

鏈接jsfiddle

Answer 1

想通了。

localStorage.setItem('positions', $("#" + id).sortable("toArray")); 

需要更換時至

localStorage.setItem(id, JSON.stringify({ container:container, index:index })); 

而且

var position = JSON.parse(localStorage.getItem('positions')); 

改爲

var position = JSON.parse(localStorage.getItem(id)); 

更新文章，以反映工作的變化。