HTML5 show localStorage element with specific content

Question

I have the following code:

<script type="text/javascript">
        for (i=0;i<localStorage.length;i++) 
        {
            var key = localStorage.key(i);
            if(key == "5") 
            {
                var value = localStorage.getItem(key); 
                document.write(value + "<br />");
            }
        }
</script>

I have tried to print all the element with a specific content - for a demo it could be 5, but I couldn't get it.

Any help?

From where you Created LocalStorage, when Loading Page Itself there will not be any LocalStorage, — Akshay Joy, May 13 '13 at 11:11
Are you sure that you have the key in local storage. You should console.log(localStorage), or check resourses tab in developer tools if you are using chrome. — Rok Burgar, May 13 '13 at 11:18

score 2 · Answer 1 · answered May 13 '13 at 11:55

Given that LocalStorage (as all key-based storage systems) doesn't allow for multiple elements having the same key, there are some solutions:

Store an array inside a single key and iterate over that array. Remember LocalStorage only supports strings, so you have to stringify/parse when writing/reading to LocalStorage:

var elements = [], 
    elements[0] = {name: "Alpha"}, 
    elements[1] = {name: "Beta"}, 
    elements[2] = {name: "Gamma"};

// Save
localStorage.setItem(key,JSON.stringify(elements);
// Read
var elements = JSON.parse(localStorage.getItem(key));

Use "dot notation" paths as keys and implement some sort of path parsing:

var elements = [], 
    elements[0] = {name: "Alpha"}, 
    elements[1] = {name: "Beta"}, 
    elements[2] = {name: "Gamma"}, 
    elementsKey = 5;

// Save
for(var e = 0; e < elements.length; e ++) {
    // Elements get stored in "5.0", "5.1", "5.2", …
    var key = elementsKey + "." + e;
    localStorage.setItem(key,JSON.stringify(elements[e]);
}

// Read
var baseKey = 5; // This is the "root" key to search for children
for (var e = 0; e < localStorage.length; e++) {
    var key = localStorage.key(e);
    var subKey = key.split(".").pop(); // this is the "sub" key for this children element
    if(key.indexOf(baseKey) >= 0) {
        var element = localStorage.getItem(key);
    }
}

Now i don't know what you are really storing inside those keys, but this should give you a good starting point.

score 1 · Answer 2 · answered May 13 '13 at 11:14

1

You need to create Local Storage Varibale Ebfore to Iterate, Your Iteration code will fire when Page Load happends

window.localStorage.setItem("1", "AKSAHY");
window.localStorage.setItem("2", "John");
window.localStorage.setItem("3", "Manu");
window.localStorage.setItem("4", "Albert");
window.localStorage.setItem("5", "Mathew");


 for (i=0;i<localStorage.length;i++) 
        {
            var key = localStorage.key(i);
            if(key == "5") 
            {
                var value = localStorage.getItem(key); 
                alert(value + "<br />");
            }
        }

Check DEMO :- DEMO

answered May 13 '13 at 11:14

Akshay Joy

1,765
1
14
23

Thanks! But I need to display *all* of the elements that have the key "5" .. with the code you have sent I can display only one key. – Or Amranov May 13 '13 at 11:20
LocalStorage should have Uniques keys, so then How do you store two different values with same key – Akshay Joy May 13 '13 at 11:22
If you want to display all just remove the If Condition just alert it – Akshay Joy May 13 '13 at 11:25
@AkshayJoy is correct. You cannot have multiple values with same key. You can, instead, have a single key hold an _array_ of objects. – sixFingers May 13 '13 at 11:31
@sixFingers then how can I code it? I need to display all the elments with a specific content. – Or Amranov May 13 '13 at 11:33
@Oe Amranov -check this http://stackoverflow.com/questions/3357553/how-to-store-an-array-in-localstorage – Akshay Joy May 13 '13 at 11:39

HTML5 show localStorage element with specific content

2 Answers2