Why is there no logical order in sessionStorage?

Question

I have a problem with my SessionStorage. I stored all my items in a specific order, but when I try to get them back (with a for loop), they are not in the correct order.

Here is how I set my SessionStorage:

function set_Item(){
    var nom = document.getElementById("nom").value;
    nom = nom.toUpperCase();
    sessionStorage.setItem("Nom", nom);
    sessionStorage.setItem("Prenom", document.getElementById("prnm").value);
    sessionStorage.setItem("Adr", document.getElementById("adr").value);
    sessionStorage.setItem("cdPost", document.getElementById("cdPost").value);
    sessionStorage.setItem("Ville", document.getElementById("ville").value);
    sessionStorage.setItem("Pays", document.getElementById("pays").value);
}

And this is how I get back my elements:

function get_Item(){
    var res = document.getElementById("res");
    var txt;
    var key;
    var valeur;
    for(var i = 0; i< sessionStorage.length; i++){
        key = sessionStorage.key(i);
        valeur = sessionStorage.getItem(key);
        if(key == "Nom"){
            txt = document.createElement("p");
            txt.textContent = valeur + " " + sessionStorage.getItem(sessionStorage.key(i+1));
            res.insertAdjacentElement('beforeend',txt);
            i++;
        }else {
            txt = document.createElement("p");
            txt.textContent = valeur + " ";
            res.insertAdjacentElement('beforeend',txt);
        }
    }
}

What I get:

sessionStorage Items

The order of the items is random and it sometimes changes.

I know that I can use the key to get the right items and set the good rendering order. But what's the reason for this behaviour?

It's an object which.. is an unordered collection of properties each of which contains a primitive value, object or function. — Adrian, Feb 24 '20 at 13:17

score 2 · Answer 1 · answered Feb 24 '20 at 13:28

The order of keys in Storage object (i.e. both in session storage and local storage) is user-agent defined (i.e. the standard doesn't require any specific order and it's up to the user-agent/browser to decide on one).

From the living HTML standard:

The key(n) method must return the name of the nth key in the list. The order of keys is user-agent defined, but must be consistent within an object so long as the number of keys doesn't change. (Thus, adding or removing a key may change the order of the keys, but merely changing the value of an existing key must not.)

score 0 · Answer 2 · answered Feb 24 '20 at 13:27

Instead of iterating over all sessionStorage items you can do

if(sessionStorage.hasOwnProperty("Nom")) {
    // your code here
} else {
    // your code here
}

and if the item is set to sessionStorage you can always access it like

sessionStorage.setItem("Nom", "Some Name I guess");
console.log(sessionStorage.Nom); // see this works

You also say:

The order of the items is random and it sometimes changes.

follow this link, it might helps you understand the object order in javascript. Does JavaScript Guarantee Object Property Order?

Why is there no logical order in sessionStorage?

2 Answers2