从 $.each 中的本地存储中检索图像 src答案

【问题标题】：Retrieve image src from Local Storage in $.each从 $.each 中的本地存储中检索图像 src
【发布时间】：2014-09-16 11:20:48
【问题描述】：

我有一个循环，可以检索我的数据并将其分配给表单中的元素。

到目前为止效果很好。但是如何从本地存储中获取src 并填充图像src？

本地存储：

Key = smallImage1_1 
Value = file:///var/mobile/Applications/66294192-6BFD-458B-B571-89ABA5F7F7E8/tmp/cdv_photo_049.jpg

JS：

$(document).ready(function() {
    if (localStorage) {
        localStorage.setItem("flag", "set");
        // Browser supports it
        $(".stored").change(function () {
            var data = $(this).val();
            var thisName = $(this).attr('name');
            var thisValue = $(this).val();
            localStorage.setItem(thisName, thisValue);
        });

        // Test if there is already saved data
        if (localStorage.getItem("flag") == "set") {

            // Same iteration stuff as before
            var data = $("#formID").serializeArray();

            //only way we can select is by the name attribute, but jQuery is down with that.  
            $.each(data, function (i, obj) {
                $("[name='" + obj.name + "']").val(localStorage.getItem(obj.name));
            });
        }
    }

// save url to local storage
function onPhotoDataSuccess1_1(imageURI) {
var smallImage1_1 = document.getElementById('smallImage1_1');
smallImage1_1.src = imageURI;
var thisValue = smallImage1_1.src;
var thisName = smallImage1_1.name;
localStorage.setItem(thisName, thisValue);}

HTML：

<li class="odd">
    <h2>Are there Par levels in place?</h2>
    <input name="k11" id="k11" tabindex="1" class="stored" type="text" placeholder="Notes..."  >
    <div class="bottom">
        <div class="ynDropdown" name="k12"></div>
        <div class="ratingDropdown" name="k13"></div>
        <img style="width:38px;height:38px;" id="smallImage1_1" class="camera" src="../img/camera.png" onclick="capturePhoto1_1();" name="smallImage1_1"/>
        <img style="width:38px;height:38px;" id="smallImage1_2" class="camera" src="../img/camera.png" onclick="capturePhoto1_2();" name="smallImage1_2"/>
        <img style="width:38px;height:38px;" id="smallImage1_3" class="camera" src="../img/camera.png" onclick="capturePhoto1_3();" name="smallImage1_3"/>
        <span class="clear"></span>
    </div>
</li>

【问题讨论】：

这些是$("[name='" + obj.name + "']") 图像吗？您应该提供您的 HTML、data 的示例和 localStorage 返回的示例。现在的答案不能准确。我可以想象像$('img[data-name="' + obj.name + '"]').attr('src', localStorage.getItem(obj.image)); 这样的东西，但我怀疑这与现实相去甚远。
我看到了 JS 代码。我没有看到 HTML 代码，或者至少没有提示 img 的样子。 data 的故事与 localStorage 的内容相同。
jQuery 的 .serializeArray() 仅保存 <input>、<select>、<textarea>。您必须手动将图像 src 保存到 localStorage。例如，通过将所有图像 src 放入数组并使用 localStorage.setItem("imagesSrc", JSON.stringify(imagesSrcArray)); 之类的东西保存它。然后用 `var imagesSrcArray = JSON.parse(localStorage.getItem("imagesSrc"));`` 读取
我用如何将 URL 保存到本地存储的方式更新了代码。
试试$('#formID .bottom img').each(function() { $(this).attr('src', localStorage.getItem($(this).attr('name'))); });

标签： javascript jquery html cordova local-storage

【解决方案1】：

您可以选择所有需要的图像并根据其名称为每个图像设置src：

$('#formID .bottom img').each(function()
{
    $(this).attr('src', localStorage.getItem($(this).attr('name')));
});

【讨论】：