使用本地存储的可排序列表函数出错

Error in function for sortable list using local storage

本文关键字：排序 列表 函数 出错 存储      更新时间：2023-09-26

我使用这个函数与framework7排序列表来保存列表顺序的位置，我可以将它们保存到本地存储，但我无法读取它们，我得到了这个错误:

Uncaught TypeError: Cannot read property 'id' of undefined

它指的是这一行:

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));
});

这里是my 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>

帮忙吗?

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

如果你调试你的javascript，你会看到你有3个"li"类，列表的长度和2个函数(item()和namedItem())，正因为如此，你在第三次迭代后得到这个错误。

正如其他人已经说过的，您首先需要验证属性是否存在，但是他提供给您的代码将失败，因为他还检查了dataset的属性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]);
      }
    }
  }    
}

您也可以通过验证来检查这个jsfiddle https://jsfiddle.net/7bv849wc/1/

编辑，因为我忘记添加索引itemsArr*

似乎不是抛出错误的本地存储，而是试图访问未定义的数组元素的属性(在您的情况下是数据集)。您可以先检查属性是否未定义:

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

你可能希望对你的数据做额外的检查，以防止这些类型的错误，希望这能帮助你回到正轨。

相关文章：