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],......

这个应该怎么存和取


慕桂英4014372
浏览 989回答 2
2回答

慕姐8265434

localStorage 只能保存文本内容,对于一个 DOM 对象来说如果需要保存则要进序列化处理,而不能直接扔到 localStorage 中,比如可以通过&nbsp;outerHTML&nbsp;来进行序列化操作:localStorage.setItem('key',&nbsp;liEl.outerHTML)更推荐你把需要的数据进行提取,只存储一个更简单的数据结构,这种做法更符合现代前端开发的思想。

POPMUISE

localStorage.setItem('key',JSON.stryingfy(save));只能村字符串(还有就是本地存储做这些事情有点浪费啊),你可以把数据存进去,再存个标识,自己去解析
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript