-5

I want to store more than one dynamic images in local storage html5 and retrieve on page refresh......

Here is my code and 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();
});

Link to jsfiddle http://jsfiddle.net/fq58hrh1/14/

Thanks in advance. i hope i clear my question

akkii922
  • 1
  • 3
  • 1
    Where is alert here? – Ashish Choudhary Nov 26 '15 at 10:51
  • Because you are 'alerting' the DOM node, not src property. BUT wait, which alert??? – A. Wolff Nov 26 '15 at 10:53
  • @akkii922 You asked in the question title `Why alert is showing...` which alert? – Ashish Choudhary Nov 26 '15 at 10:54
  • sorry sir actually i am new here.. so i copied from somewhere.. that my mistake.... :( – akkii922 Nov 26 '15 at 10:58
  • Please explain your proplem - what isnt working? What result did you expect, what did you get instead. Are there any error codes in the js console? – Steve Nov 26 '15 at 11:00
  • @Steve .. sir after making image clone i want to store my clone images in local storage html5 and than on page refresh i want to show those store images..... thanks – akkii922 Nov 26 '15 at 11:04
  • Please help me i am new in jquery... see the jsfiddle for my problem.... please anybody....... and i know this question is repeated but all problems are different from each other........ Thats why i am asking..... please :(. – akkii922 Nov 26 '15 at 11:11
  • @ akkii922 , can you check below my answer. I think you wanted to see the images saved after the reload, which is working in my demo – nshah143 Nov 26 '15 at 12:50
  • @akkii922 you are not calling 'loadBackground()' at any point.Since you are not doing it you don't see the image. Please add that. – Preeti Maurya Nov 26 '15 at 15:09
  • @akkii922 , if you are satisfied with the answer can you mark it as an answer as well. – nshah143 Nov 27 '15 at 05:03
  • Thank you soooooo much @nshah143 ... You saved my life....... :) – akkii922 Nov 27 '15 at 06:01

1 Answers1

2

Usage of localStorage is fault in your code , Below i explain it

use window.localStorage – stores data with no expiration date When you need to set a variable that should be reflected in the next page(s) or after reload, use:

var someVarName = "value"; localStorage.setItem("someVarName", someVarName);

And in any page (like when the page has loaded), get it like:

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

.getItem() will return null or the value stored.

You updated javascript is as below

$(".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();
});

I have provided an updated demo http://jsfiddle.net/fq58hrh1/29/ To test it click on images and then save it and then reload the page.

Yasemin çidem
  • 623
  • 8
  • 17
nshah143
  • 549
  • 4
  • 22