jquery, html5, local storage

I have the jquery script below. and it is working. however, when I try to parse to html that have two same id name. It does not show the value any more. If I put one iabel name id. it works.

How can I make more than 1 label has value from the local storage codes below?


<script>
        window.onload = function() {
            retrieveData();
            retrieveSingleData();
        };
        function retrieveData() {
            for (var i = 0, len = localStorage.length; i < len; i++) {
                var key = localStorage.key(i);
                var value = localStorage[key];
                 
                if (value == "")
                {
                    value = "Missing";
                }
                $('#' + key).html(value);
                //alert(key + " => " + value);
            }
        }       
         
</script>

<label id="test1"></label>
<label id="test1"></label>

Open in new window

LVL 1
ITsolutionWizardAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
The rule is that 'id's must be unique.  JavaScript will only find the first one.  I don't know why you're getting nothing except that each 'id' should be different.
ITsolutionWizardAuthor Commented:
Because I need to show the values on different areas. What is my options to make it happen?
Olaf DoschkeSoftware DeveloperCommented:
Why don't you generate labels? Instead of $('#' + key).html(value); fniding a certain id and setting its inner html, you could simply have one div for the data and add labels. It's totally wrong to use same id, even in localstorage keys, but it won't matter that way in the first place and you may care for that later. You can give all added tags the same class to do css layout of them, of course.

So, to put this idea into action: Mainly replace your labels with a <div id="localstorage" /> and use jquery code:
for (var i = 0, len = localStorage.length; i < len; i++) {
  var key = localStorage.key(i);
  var value = localStorage[key];
  $("#localstorage").append('<label>'+key+'</label><input type="text" value="' + value + '"><br>');
}

Open in new window

in detail: http://jsfiddle.net/ten5r39L/

Bye, Olaf.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Your code is looping over the localStorage domain and finding key values which it is linking to elements in the document.

You only have one key : value pairing for each key value - so this should map to a single element. I don't understand why you have two lables with the same ID - do you want to set both to the same value?

If that is the case then rather use a class or a data-attribute and then use that in your selector for setting the values.

But I would be interested to know if you really want to target more than one element for a single key:value (localStorate) pair or if it should be a single LS value to a single document element?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.