localStorage存DOM元素對象應該怎么存？

我想用localStorage存一下一堆li的內容 但是不管怎么存取出來的值有會有問題

<div id="dd1" class="parent-box">
    <button class="editOrder ddd" data-for="#dd1">編輯順序</button>
    <button id="save" onclick="save1()">保存</button>
    <ul class="list ee">
        <li>01<p>1</p></li>
        <li>02<p>1</p></li>
        <li>03<p>1</p></li>
        <li>04<p>1</p></li>
        <li>05<p>1</p></li>
        <li>06<p>1</p></li>
        <li>07<p>1</p></li>
        <li>08<p>1</p></li>
        <li>09<p>1</p></li>
        <li>10<p>1</p></li>
    </ul>
</div>

<script>
function save1(){
  var save =  document.getElementById("dd1").querySelectorAll("li")
  save = Array.prototype.slice.call(save)
   for(var i=0;i<save.length;i++){
    for(var j = i + 1;j<save.length;j++){
      var savei =  parseInt(save[i].getAttribute("data-top"))
        var savej =  parseInt(save[j].getAttribute("data-top"))
        if(savei>savej){
            var tmp = save[i];
            save[i] = save[j];
            save[j] = tmp;
                        console.log(savej)
        }
     }
   }
// console.log(JSON.stringify(save))
localStorage.setItem('key',save);
 } 
//這個是存儲   data-top是我排序用的 不用理會 

             var read=localStorage.getItem('key');
             document.getElementById("save").innerHTML=read
//這個是取值  
</script>

但是這么取的話會返回
[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement]
如果用
localStorage.setItem('key',JSON.stringify(save));

var read=JSON.parse(localStorage.getItem('key'));
返回的就是
[object Object],......
這個應該怎么存和取