多个 DIV 作为 json 字符串放入 localStorage

Question

我有 html 和几个（可能超过 2 个）相似的 DIVs:

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

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

多个 DIV 作为 json 字符串放入 localStorage

Multiple DIVs as json string into localStorage

jquery

json

local-storage