Question

独立于HTML id属性，是否有一种在JavaScript中定义唯一元素标识符以与HTML5本地存储一起使用的好方法？

localStorage.setItem('uniqueid', value);

可以这样做：

var uid = ancestor.index(element); // uid = 0

localStorage.setItem(namespace + uid, value);

问题在于，如果元素顺序发生变化，则数据与右元素无关：

var uid = ancestor.index(element); // another element is prepended, so uid = 1

localStorage.getItem(namespace + uid);

编辑 - 真实的例子

HTML code：

<ul>
<li aria-hidden="true">foo</li>
<li>bar</li>
</ul>

jQuery代码：

var ul = $('ul');

ul.find('li').each(function() {

    var element = $(this),
        uid = ul.index(element),
        data = JSON.parse(this.storage.getItem(uid));

    // load
    console.log(data.hidden);

    // save
    this.$window.bind('unload', function() {

        localStorage.setItem(uid, JSON.stringify({
            hidden: typeof element.attr('aria-hidden') === 'string',
        }));
    });
});

现在我使用每个列表项的索引来创建唯一标识符。我可以像这样设置一个带有HTML的数据：

<li data-uid="foo">foo</li>

有没有办法动态设置唯一标识符？

Answer 1

如果存储的数据取决于元素的特定顺序，那么似乎表明将此数据保留在当前页面之外没有帮助。您可能希望在$.data中查看data-*属性，例如jQuery实现。

这将允许您存储与任何元素关联的任意数据。

Answer 2

localStorage.setItem(localStorage.length, value);

与创建计数器并每次递增

相同

注意：如果您删除了一个条目，那么下一个“新”ID将与最后一个相同。

本地存储中的0个项目下一个id创建为0
创建的本地存储中的1个项目是1
本地存储中的2个项目下一个ID已创建为2
删除商品ID 1
本地存储中的2个项目下一个id创建的是2（其中写入了以前的id 2记录。

一种可能的解决方法是将项目标记为“已删除”但不删除它们。显然，这并不适用于所有情况。

感谢@ Mike-robinson指出这一点。

用于本地存储的JavaScript唯一标识符

2 个答案: