Javascript 无法从浏览器存储中加载布局内容

我正在使用一个名为gridstack.js的

库

。我有一个

网格

，如下所示↓

这是我使用的代码：

.卡体{
-webkit-box-flex:1；
-ms-flex:1自动；
flex:1自动；
最小高度：1px；
填充：1.25rem；
}
.newWidget{
背景色：#6cad84！重要；
}
.卡片{
背景：无；
}
#垃圾{
背景色：#cc6857；
}
.白色文本{
颜色：#fff！重要；
}
.文本中心{
文本对齐：居中！重要；
}
.ui可调整大小se、.ui可调整大小sw{
不透明度：0！重要；
}
.ui可调整大小的se{
底部：-5px！重要；
右：-5px！重要；
}
.网格堆栈项内容{
溢出：隐藏！重要
}
我的仪表盘

//保存小部件的大小和坐标
函数saveData（）{
var项目=[]；
$（'.grid stack item.ui draggable'）。每个（函数（）{
var$this=$（this）；
推({
x:$this.attr（'data-gs-x'），
y:$this.attr（'data-gs-y'），
w:$this.attr（'data-gs-width'），
h:$this.attr（'data-gs-height'），
内容：$（'.grid stack item content'，$this.html（）
});
});
//将数据保存到本地存储器
setItem（“网格布局”，JSON.stringify（项））
}
//检查小部件的大小和坐标，并添加到网格中
函数getWidgetData（）{
让序列化=null；
让grid_stack=$（'.grid stack'）；
让网格=$（'.grid stack'）.data（'gridstack'））
日志（“网格”，网格）
if（localStorage.getItem（“网格布局”）！==null）{
序列化=JSON.parse（localStorage.getItem（“网格布局”）；
_.each（JSON.parse（序列化）、函数（节点）{
grid.addWidget（$（''），
节点x，节点y，节点w，节点h）；
});
}否则{
log（“没有要读取的本地存储数据”）
}
}
//在开始时检查本地存储
getWidgetData（）
var simpleGrid=GridStack.init({
alwaysShowResizeHandle:/Android | webOS | iPhone | iPad | iPod |黑莓| IEMobile | Opera Mini/i.test（导航器）
.用户代理），
可调整大小：{
句柄：“e、se、s、sw、w、n”
},
动画：对，
答:对,，
dragIn:'.newWidget'，//可以从外部拖动的类
dragInOptions:{revert:'invalid'，scroll:false，appendTo:'body'，helper:'clone'}，
removable:“#trash”，//拖出删除类
删除时间：100，
});
//每次更改时保存小部件布局
simpleGrid.on（'added-removed change'，函数（e，items）{
saveData（）
});

现在

网格

显示良好，我可以

调整大小

并

拖动
小部件
。现在我想
将更改存储在浏览器存储中，并在页面加载时检索它。正如上面代码中提到的，这就是我用来存储布局的方法

// save the size and coordinates of the widgets
function saveData() {
    var items = [];

    $('.grid-stack-item.ui-draggable').each(function () {
        var $this = $(this);
        items.push({
            x: $this.attr('data-gs-x'),
            y: $this.attr('data-gs-y'),
            w: $this.attr('data-gs-width'),
            h: $this.attr('data-gs-height'),
            content: $('.grid-stack-item-content', $this).html()
        });
    });

    // Save data to local storage
    localStorage.setItem("grid-layout", JSON.stringify(items))
}

现在从浏览器存储中加载布局，这就是我要做的（在上面的代码中提到）

下面是这段代码

 let grid = $('.grid-stack').data('gridstack')

由于某种原因，它给出了未定义的。现在我不明白为什么它没有定义。我在网上查找帮助，但没有找到任何有用的方法来解决我的问题。我在堆栈溢出上发现了这两个问题



但我不太明白他们在做什么，或者这是否适用于我的情况。我做错了什么？
正如“bug”报告中提到的，他混合了
$（“.grid stack”）
的旧API调用，这是v0.6及更旧版本的jquery代码，以及使用
GridStack.init（）的最新版本2.x
到init并返回一个网格指针

GridStack不使用jquery API，因为1.x
哦，所以我使用的是旧功能。好了，这是有道理的。让我尝试一下最新的功能并解决这个问题。谢谢
index.html:156 Uncaught TypeError: Cannot read property 'addWidget' of undefined
    at index.html:156
    at r (lodash.min.js:9)
    at Function.hf (lodash.min.js:83)
    at getWidgetData (index.html:155)
    at index.html:168

 let grid = $('.grid-stack').data('gridstack')