jquery - 多个 DIV 作为 json 字符串存入 localStorage

Question

我有一些(可能超过2个)类似的DIV的html:

<div class="article">
<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/400px-IBM_logo.svg.png" />
<div class="text2ls">IBM</div>
</div>
<hr/>
<div class="article">
<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Microsoft_logo_%282012%29.svg/440px-Microsoft_logo_%282012%29.svg.png" />
<div class="text2ls">Microsoft</div>
</div>

并希望将它们作为 JSON 字符串添加到 localStorage 中。这是我的 jQuery:

$('.article').each(function () {
var imageUrl = $(this).find('img[id=img]').attr('src');
convertImgToBase64(imageUrl, function (base64Img) {
    localStorage.setItem('elephant', base64Img);
    var picture = localStorage.getItem('elephant');
    lsengine(picture);
});
});
function lsengine(pic) {
var copy = $('.text2ls').html();
var article = {
    "text": copy,
        "image": pic
};
localStorage.setItem('articles', JSON.stringify(article));
localStorage.removeItem('elephant');
}

但由于某些原因它只添加了一个DIV的内容。你能帮我解决我做错的事情吗？

请玩我的jsfiddle:http://jsfiddle.net/5eq3koco/2/

Answer 1

您在 $.each 循环的每次迭代中调用 localStorage.setItem('articles', JSON.stringify(article));。您可以做的是使用一个全局数组来存储每个文章对象并在循环结束后将其字符串化。与此类似的东西:

var articles = [];
$('.article').each(function () {
    var imageUrl = $(this).find('img[id=img]').attr('src');
    convertImgToBase64(imageUrl, function (base64Img) {
        localStorage.setItem('elephant', base64Img);
        var picture = localStorage.getItem('elephant');
        lsengine(picture);
    });
});
function lsengine(pic) {
    var copy = $('.text2ls').html();
    articles.push({
        "text": copy,
        "image": pic
    });
}

localStorage.setItem('articles', JSON.stringify(articles));
localStorage.removeItem('elephant');

编辑 fiddle 演示中遇到的第二个问题是 stringify 函数立即发生，而触发写入 localStorage 的 img.onload 是异步发生的。看看这个:https://jsfiddle.net/limdauto/5eq3koco/8/