javascript - 如何遍历具有相同前缀的 id

Question

我有这部分代码，可根据列表项的 ID 号在单击时将列表项保存到 localStorage。在另一个页面上，我可以加载保存的任何列表项。

var save1075 = $('#store-1075').get(0);
$('#store-1075').on('click', function () { 
    var storeStorageKey1075 = $(this).attr('id'); 
    localStorage.setItem('storeStorageKey1075', $(this).attr('id'));
    localStorage.setItem('storeStorageKey1075', this.innerHTML);
});

if ( localStorage.getItem('storeStorageKey1075') ) {
save1075.innerHTML = localStorage.getItem('storeStorageKey1075'); 
}

var storeStorageKey1075 = $(this).attr('id');
    if ( localStorage.getItem('storeStorageKey1075') ) {
    storeStorageKey1075 = localStorage.getItem('storeStorageKey1075');

}

现在，我必须为每个单独的 ID 号重复该代码块，并且我试图将 ID 号设置为一个变量，该变量在单击时循环遍历所有可能的 ID 号，但只保存该特定 ID 的 ID。也许是这样的：

var id = //some sort of loop or array of possible ids.
var save = $('#store-'+id).get(0);
$('#store-'+id).on('click', function () { 
    var storeStorageKey = $(this).attr('id'); 
    localStorage.setItem('storeStorageKey', $(this).attr('id'));
    localStorage.setItem('storeStorageKey', this.innerHTML);
});

if ( localStorage.getItem('storeStorageKey') ) {
save.innerHTML = localStorage.getItem('storeStorageKey'); 
}

var storeStorageKey = $(this).attr('id');
    if ( localStorage.getItem('storeStorageKey') ) {
    storeStorageKey = localStorage.getItem('storeStorageKey');

}

每个列表项都具有相同的前缀“store-”，并且数字没有特定的顺序，而是在每次创建新的商店位置时随机生成。

Answer 1

显而易见的事情是添加一个类，但您也可以：

var elems = $( "[id^='store']")

elems.on( "click", function() {//Save html on click
    localStorage.setItem( this.id, this.innerHTML );
});

    //Retrieve html
elems.each( function() {
    var html = localStorage.getItem( this.id );

    if( html ) {
        $(this).html( html );
    }
});

Answer 2

这会遍历所有以 开头的键storeStorageKey：

for (var i=0; i<localStorage.length; i++) {
    var key = localStorage.key(i);
    if (/^storeStorageKey/.test(key)) {
        var item = localStorage.getItem(key);
        // do something with item
    }
}

Answer 3

我建议不要在 id 中使用前缀，而是添加一个类来指示一个项目是可存储的：

<div class="storable" id="store-1234">...</div>

然后您可以使用该类一次性选择所有可存储的东西：

$('.storable').on('click', function () { 
    var storeStorageKey = $(this).attr('id'); 
    ...
});