Question

我使用此功能与framework7可排序列表保存列表顺序的位置，我可以将它们保存到本地存储，但我无法读取它们，我收到此错误：

未捕获的TypeError：无法读取属性＆＃39; id＆＃39;未定义的

它对这条线的反应：

if (ls[j] === itemsArr[i].dataset.id) {

这是我的全部功能：

var list = document.getElementById('my-id');
var items = list.children;
var itemsArr = [];
for (var i in items) {
itemsArr.push(items[i]);
}
// localStorage
var ls = JSON.parse(localStorage.getItem('data-user-sort') || '[]');

for (var j = 0; j < ls.length; j++) {
for (i = 0; i < itemsArr.length; ++i) {
  if (ls[j] === itemsArr[i].dataset.id) {
     list.appendChild(itemsArr[i]);
  }
}    
}


$('.list-block.sortable').on('sort', function () {
var newIdsOrder = [];
$(this).find('li').each(function(){
  newIdsOrder.push($(this).attr('data-id'));
});

localStorage.setItem('data-user-sort', JSON.stringify(newIdsOrder));
});

这里是我的HTML：

<div class="list-block sortable">
      <ul id="my-id">
        <li data-id="1">
          <a href="#" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Item 1</div>
            </div>
          </a>
          <div class="sortable-handler"></div>
        </li>
        <li data-id="2">
          <a href="#" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Item 2</div>
            </div>
          </a>
          <div class="sortable-handler"></div>
        </li>
        <li data-id="3"> 
          <a href="#" class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Item 3</div>
            </div>
          </a>
          <div class="sortable-handler"></div>
        </li>
      </ul>
    </div>

任何帮助？

Answer 1

问题是你的itemsArr变量不仅包含“li”对象，所以当你迭代它时，你最终会尝试访问不存在的对象上的“dataset”属性。

如果您调试javascript，您将看到您有3个“li”类，列表的长度和2个函数（item（）和namedItem（）），因此，您在第三次迭代后得到该错误。

正如其他人已经说过的那样，您首先需要验证属性是否存在，但他提供给您的代码将失败，因为他还检查了数据集的属性ID，这是一个未定义的值。此代码应该适合您：

for (var j = 0; j < ls.length; j++) {
  for (i = 0; i < itemsArr.length; ++i) {
    if(itemsArr[i].dataset !== undefined){
      if (ls[j] === itemsArr[i].dataset.id) {
         list.appendChild(itemsArr[i]);
      }
    }
  }    
}

您还可以使用该验证https://jsfiddle.net/7bv849wc/1/

来检查此jsfiddle

已编辑，因为我忘记在itemsArr *

上添加索引

Answer 2

看起来不是抛出错误的本地存储，而是尝试访问未定义的数组元素的属性（在您的情况下为数据集）。您可以先检查属性是否未定义：

  if ((itemsArr[i].dataset.id !== undefined) && ls[j] === itemsArr[i].dataset.id) {

您可能希望对数据进行额外检查，以预先确认这些类型的错误，希望这有助于您重回正轨。

使用本地存储的可排序列表的功能出错

2 个答案: