JavaScript；使用createElement从localStorage加载数据

Question

我遇到的问题是找到一种方法，当数据加载时，它会按照我在单击“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
}

这是我用来创建元素的函数。我想要的是当加载数据时，它将以微笑的方式创建数据。

这是我的 files.[1] 的链接由于某种原因，我无法让它在 jsfiddle 上运行。

Answer 1

与其将其保存到本地存储并在清除缓存时让人们生气，不如将其存储在服务器上？并在该服务器上创建一个包含您的神奇宝贝数据的 php 数组？

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 :)
*/