Javascript; Using createElement to load data from localStorage

Question

The problem im having is finding out a way when data is loaded that it will create its own Elements the way i have it set for when clicking on "Rasie New Pokemon".

function newPokemon() {
var newDiv = document.createElement("div");
// Creates a new div
var xpPar = document.createElement("p");
var lvlPar = document.createElement("p");
var nxtLvlPar = document.createElement("p");
var namePar = document.createElement("p");
// Creates a new paragraph element

var newImg = document.createElement("img");
// Creates a new image element

var pokemon = ["Mudkip", "Treecko", "Torchic"];
// Array containing pokemon that can be raised

var randNum = Math.floor(Math.random() * 3);
// Chooses a randome number between 1 and 2

if (numOfPoke < 1) {

    newDiv.id = "content";

    newImg.style.cursor = "pointer";
    newImg.id= "pokemon";

    switch (randNum) {
        case 0:
            newImg.src = "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/258.gif";
        break;
        case 1:
            newImg.src = "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/252.gif";
        break;
        case 2:
            newImg.src = "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/255.gif";
        break;
        default:
            alert("Something went wrong! Alert the creator of the game!");
        break;
    }

    newImg.onclick = function() {
        addXP()
    };

    xpPar.id = "xp";
    xpPar.innerHTML = "XP: " + xp.toFixed();

    lvlPar.id = "lvl";
    lvlPar.innerHTML = "Level: " + lvl;

    nxtLvlPar.id = "nxt_lvl";
    nxtLvlPar.innerHTML = "XP To Next Level: " + xpToNxtLvl.toFixed(2);

    namePar.id = "name";
    namePar.innerHTML = pokemon[randNum];

    document.body.appendChild(newDiv);
    document.getElementById("content").appendChild(newImg);
    document.getElementById("content").appendChild(xpPar);
    document.getElementById("content").appendChild(lvlPar);
    document.getElementById("content").appendChild(namePar);
    document.getElementById("content").appendChild(nxtLvlPar);

    numOfPoke++;
    // Adds one to the pokemon counter
} else {
    alert("Only one Pokemon can be raised at a time!");
}
// Allows only one new pokemon to be raised
}

This is the function i am using to create the elements. What i want is for when the data is loaded it will create the data in a smiler way.

here is a link to my files.[1] I couldn't get it to work on jsfiddle for some reason.

Answer 1

Instead of saving it into local storage and getting people mad when they clear their cache how about storing it on a server ? And Create a php array on that server containing the data of your pokemon ?

var currentPokemon;

var Pokemon = {

    0: {
        Name: "Mudkip",
        Exp: 0,
        NextExp: 50,
        Lvl: 1, 
        Img: "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/258.gif"
    },

    1: {
        Name: "Treecko",
        Exp: 0,
        NextExp: 50,
        Lvl: 1, 
        Img: "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/252.gif"
    },

    2: {
        Name: "Torchic",
        Exp: 0,
        NextExp: 50,
        Lvl: 1, 
        Img: "http://www.pokestadium.com/pokemon/sprites/img/main-series/5/black-white/animated/front/255.gif"
    }

};

currentPokemon = Pokemon[Math.floor(Math.random() * 3)];

/*
    Now you can get all data you want from currentPokemon :)
*/