localStorage存DOM元素对象应该怎么存？

Question

我想用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],......这个应该怎么存和取

Answer 1

localStorage 只能保存文本内容，对于一个 DOM 对象来说如果需要保存则要进序列化处理，而不能直接扔到 localStorage 中，比如可以通过 outerHTML 来进行序列化操作：

localStorage.setItem('key', liEl.outerHTML)

更推荐你把需要的数据进行提取，只存储一个更简单的数据结构，这种做法更符合现代前端开发的思想。

Answer 2

localStorage.setItem('key',JSON.stryingfy(save));
只能村字符串(还有就是本地存储做这些事情有点浪费啊),你可以把数据存进去，再存个标识，自己去解析