存储拖拽之后的div组件数组

上一篇博客，实现了各个模块之间的拖拽，但是呢，你一刷新页面，又回到了原本的样子，那肯定是不行的，既然拖动了就肯定想要下次打开还是我拖动之后的样子。

既然这样我们就做一个本地存储

我们用localStorage，用sessionStorage关掉页面之后，数据会丢失，用localStorage，数据不会丢失，会一直存在本电脑上，直到你自己手动去清除缓存(因为前台页面我没有写清除按钮和事件)。

添加一个end事件，拖拽完成之后执行

    onEnd() {
      // 拖动完成之后，数组变化，就可以存入本地
      // localStorage.setItem("dragList", this.contentItems);
      localStorage.setItem("dragList", JSON.stringify(this.contentItems));
    },

拖动之后，这个数组肯定会改变，（如果没调整数组就没变），用 localStorage.setItem("dragList", JSON.stringify(this.contentItems));这句话把他存到本地。

F12就可以看到你存到的内容了

然后就是取

    getdragList() {
      var dragListData = localStorage.getItem("dragList");
      dragListData = JSON.parse(dragListData);
      if (dragListData) {
        var arr = [];
        arr.push(dragListData);
        this.contentItems = arr[0];
        this.contentItems.forEach((item) => {
          item.value = item.lable;
        });
        console.log("this.contentItems", this.contentItems);
      } else {
        this.contentItems = this.contentItems;
      }
    },

这个是取的方法，每次打开页面调用一下。

  created() {
    this.getdragList();
  },

这样基本上就可以实现拖动div盒子，并且存储到本地。

其中遇到一些小问题，就比如，我取得时候，做了一个遍历，原因是这样的，因为上一篇中定义数组的时候value是一个组件，所以在存的时候就不是我们想要的内容了，

所以针对原始数组contentItems我做了一下改变

      contentItems: [
        { lable: "indexCard1", value: indexCard1 },
        { lable: "indexCard2", value: indexCard2 },
        { lable: "indexCard3", value: indexCard3 },
        { lable: "indexCard4", value: indexCard4 },
        { lable: "indexCard5", value: indexCard5 },
        { lable: "indexCard6", value: indexCard6 },
        { lable: "indexCard7", value: indexCard7 },
        { lable: "indexCard8", value: indexCard8 },
      ],

我用了组件名，这样的话我拿数据的时候重新赋值，获取的仍然是组件。

其中还发现了一个问题

那就是，打印出来的数组，你去打印他的数据类型的时候会是对象~这是没问题的~

存储拖拽之后的div组件数组

猜你喜欢