为什么在刷新页面后图像不能被检索？

Question

我想存储在本地存储HTML5多个动态图像，并检索页面刷新......

这里是我的代码和的jsfiddle

HTML

<ul class="lib"> 
    <li> 
     <img class='my_image' src='http://wcdn1.dataknet.com/static/resources/icons/set95/5076c9d9.png'> 
    </li> 
    <li> 
     <img class='my_image' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png'> 
    </li> 
</ul>Click the image to make clone and then click save btn to store in local sorage html5 and after that refresh to retreave the images in below box 
<div class="block" id="block_test"></div> 
<input id="button" type="button" value="save"> 

CSS

.lib { 
    border:1px solid #000; 
} 
.lib li { 
    display:inline; 
} 
.lib img { 
    width:100px; 
} 
#block_test { 
    border:1px solid #000; 
    height:300px; 
} 

JS

$(".my_image").click(function() { 
    $(this).clone().addClass('input').removeClass('my_image').appendTo(".block").freetrans({ 
     x: 0, 
     y: 0 
    }); 
}); 

function setBackground() { 
    localStorage.input = $(".input").attr('src'); 
} 

function loadBackground() { 
    if (localStorage.input.length == 0) { 
     localStorage.input = "empty"; 
    } else { 
     var img_elem = $('<img id="output">'); 
     img_elem.attr('src', localStorage.input).addClass('input').removeClass('my_image').appendTo(".block").freetrans({ 
      x: 0, 
      y: 0 
     }); 

     localStorage.input = $(arr[0]).attr('src'); 
    } 
} 

$("#button").click(function() { 
    setBackground(); 
}); 

链接的jsfiddle http://jsfiddle.net/fq58hrh1/14/

在此先感谢。我希望我清楚我的问题

的localStorage的

Answer 1

用法是错误在你的代码，下面我解释一下

使用window.localStorage - 没有到期日 存储数据当你需要设置应该反映一个变量在下一页或重新载入后，使用：

var someVarName =“value”; localStorage.setItem（“someVarName”，someVarName）;

，在任何页面（当页面加载等），把它想：

var getVarName = localStorage.getItem("someVarName"); 

.getItem（）将返回null或存储的值。

---

您更新JavaScript是如下

$(".my_image").click(function() {  $(this).clone().addClass('input').removeClass('my_image').appendTo(".block").freetrans({ 
     x: 0, 
     y: 0 
    }); 
}); 

function setBackground() { 
    localStorage.setItem("someVarName", $("#block_test").html()); 
} 

function loadBackground() { 
    if(localStorage.getItem("someVarName")!=null){ 
     var storedImages = localStorage.getItem("someVarName"); 
     $("#block_test").html(storedImages) 
    } else { 
     $("#block_test").html("No Images Yet"); 
    } 
} 

$("#button").click(function() { 
    setBackground(); 
}); 

$(document).ready(function() { 
    loadBackground(); 
}); 

我已经提供了一个更新的演示http://jsfiddle.net/fq58hrh1/29/为了测试请点击图像，然后将其保存，然后重新加载页面。