Question

I have stored data in hidden <input> tags, but it caused reduction in performance.
There was an array of ~100 items. This is one of them:

<div class="data">
            <input type="HIDDEN" name="zold_0" value="0">
            <input type="HIDDEN" name="dpi_0" value="27x40">
            <input type="HIDDEN" name="minoseg_0" value="gyenge">

            <input type="HIDDEN" name="src_0_0" value="/_files/4/8/11307.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_0_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_0_1" value="/_files/4/8/11308.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_0_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_1" value="0">
            <input type="HIDDEN" name="dpi_1" value="27x36">
            <input type="HIDDEN" name="minoseg_1" value="gyenge">

            <input type="HIDDEN" name="src_1_0" value="/_files/4/8/11309.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_1_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_1_1" value="/_files/4/8/11310.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_1_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_2" value="0">
            <input type="HIDDEN" name="dpi_2" value="23x40">
            <input type="HIDDEN" name="minoseg_2" value="gyenge">

            <input type="HIDDEN" name="src_2_0" value="/_files/4/8/11311.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_2_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_2_1" value="/_files/4/8/11312.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_2_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_3" value="0">
            <input type="HIDDEN" name="dpi_3" value="23x34">
            <input type="HIDDEN" name="minoseg_3" value="gyenge">

            <input type="HIDDEN" name="src_3_0" value="/_files/4/8/11307.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_3_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_3_1" value="/_files/4/8/11308.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_3_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_4" value="0">
            <input type="HIDDEN" name="dpi_4" value="23x30">
            <input type="HIDDEN" name="minoseg_4" value="gyenge">

            <input type="HIDDEN" name="src_4_0" value="/_files/4/8/11309.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_4_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_4_1" value="/_files/4/8/11310.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_4_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_5" value="0">
            <input type="HIDDEN" name="dpi_5" value="20x27">
            <input type="HIDDEN" name="minoseg_5" value="gyenge">

            <input type="HIDDEN" name="src_5_0" value="/_files/4/8/11309.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_5_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_5_1" value="/_files/4/8/11310.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_5_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_6" value="0">
            <input type="HIDDEN" name="dpi_6" value="18x27">
            <input type="HIDDEN" name="minoseg_6" value="gyenge">

            <input type="HIDDEN" name="src_6_0" value="/_files/4/8/11307.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_6_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_6_1" value="/_files/4/8/11308.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_6_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_7" value="0">
            <input type="HIDDEN" name="dpi_7" value="15x27">
            <input type="HIDDEN" name="minoseg_7" value="gyenge">

            <input type="HIDDEN" name="src_7_0" value="/_files/4/8/11311.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_7_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_7_1" value="/_files/4/8/11312.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_7_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_8" value="0">
            <input type="HIDDEN" name="dpi_8" value="17x23">
            <input type="HIDDEN" name="minoseg_8" value="gyenge">

            <input type="HIDDEN" name="src_8_0" value="/_files/4/8/11309.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_8_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_8_1" value="/_files/4/8/11310.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_8_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_9" value="0">
            <input type="HIDDEN" name="dpi_9" value="16x23">
            <input type="HIDDEN" name="minoseg_9" value="gyenge">

            <input type="HIDDEN" name="src_9_0" value="/_files/4/8/11313.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_9_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_9_1" value="/_files/4/8/11314.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_9_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_10" value="0">
            <input type="HIDDEN" name="dpi_10" value="15x23">
            <input type="HIDDEN" name="minoseg_10" value="gyenge">

            <input type="HIDDEN" name="src_10_0" value="/_files/4/8/11307.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_10_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_10_1" value="/_files/4/8/11308.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_10_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_11" value="0">
            <input type="HIDDEN" name="dpi_11" value="12x16">
            <input type="HIDDEN" name="minoseg_11" value="gyenge">

            <input type="HIDDEN" name="src_11_0" value="/_files/4/8/11309.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_11_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_11_1" value="/_files/4/8/11310.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_11_1" value="A fill eljárás során a pirossal jelzett rész levágódik.">
            <input type="HIDDEN" name="zold_12" value="0">
            <input type="HIDDEN" name="dpi_12" value="12x16">
            <input type="HIDDEN" name="minoseg_12" value="gyenge">

            <input type="HIDDEN" name="src_12_0" value="/_files/4/8/11313.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_12_0" value="A képarányeltérésből eredő terület fehér lesz.">
            <input type="HIDDEN" name="src_12_1" value="/_files/4/8/11314.jpg">
            <input type="HIDDEN" name="szoveges_uzenet_12_1" value="A fill eljárás során a pirossal jelzett rész levágódik."></div>

How would you recommend to store this data? XML is for this? Could you provide a basic example of its usage both client and server side?

---

I could not fully separate this (because this data sometimes comes via ajax), but it was not aim.

now it looks like this:

<div class="data"><input name="data" type="hidden" value="{&quot;zold_0&quot;:0,&quot;dpi_0&quot;:&quot;27x40&quot;,&quot;minoseg_0&quot;:&quot;gyenge&quot;,&quot;src_0_0&quot;:&quot;\/_files\/4\/8\/8305.jpg&quot;,&quot;szoveges_uzenet_0_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_0_1&quot;:&quot;\/_files\/4\/8\/8306.jpg&quot;,&quot;szoveges_uzenet_0_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_1&quot;:0,&quot;dpi_1&quot;:&quot;27x36&quot;,&quot;minoseg_1&quot;:&quot;gyenge&quot;,&quot;src_1_0&quot;:&quot;\/_files\/4\/8\/8307.jpg&quot;,&quot;szoveges_uzenet_1_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_1_1&quot;:&quot;\/_files\/4\/8\/8308.jpg&quot;,&quot;szoveges_uzenet_1_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_2&quot;:0,&quot;dpi_2&quot;:&quot;23x40&quot;,&quot;minoseg_2&quot;:&quot;gyenge&quot;,&quot;src_2_0&quot;:&quot;\/_files\/4\/8\/8309.jpg&quot;,&quot;szoveges_uzenet_2_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_2_1&quot;:&quot;\/_files\/4\/8\/8310.jpg&quot;,&quot;szoveges_uzenet_2_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_3&quot;:0,&quot;dpi_3&quot;:&quot;23x34&quot;,&quot;minoseg_3&quot;:&quot;gyenge&quot;,&quot;src_3_0&quot;:&quot;\/_files\/4\/8\/8305.jpg&quot;,&quot;szoveges_uzenet_3_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_3_1&quot;:&quot;\/_files\/4\/8\/8306.jpg&quot;,&quot;szoveges_uzenet_3_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_4&quot;:0,&quot;dpi_4&quot;:&quot;23x30&quot;,&quot;minoseg_4&quot;:&quot;gyenge&quot;,&quot;src_4_0&quot;:&quot;\/_files\/4\/8\/8307.jpg&quot;,&quot;szoveges_uzenet_4_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_4_1&quot;:&quot;\/_files\/4\/8\/8308.jpg&quot;,&quot;szoveges_uzenet_4_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_5&quot;:0,&quot;dpi_5&quot;:&quot;20x27&quot;,&quot;minoseg_5&quot;:&quot;gyenge&quot;,&quot;src_5_0&quot;:&quot;\/_files\/4\/8\/8307.jpg&quot;,&quot;szoveges_uzenet_5_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_5_1&quot;:&quot;\/_files\/4\/8\/8308.jpg&quot;,&quot;szoveges_uzenet_5_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_6&quot;:0,&quot;dpi_6&quot;:&quot;18x27&quot;,&quot;minoseg_6&quot;:&quot;gyenge&quot;,&quot;src_6_0&quot;:&quot;\/_files\/4\/8\/8305.jpg&quot;,&quot;szoveges_uzenet_6_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_6_1&quot;:&quot;\/_files\/4\/8\/8306.jpg&quot;,&quot;szoveges_uzenet_6_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_7&quot;:0,&quot;dpi_7&quot;:&quot;15x27&quot;,&quot;minoseg_7&quot;:&quot;gyenge&quot;,&quot;src_7_0&quot;:&quot;\/_files\/4\/8\/8309.jpg&quot;,&quot;szoveges_uzenet_7_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_7_1&quot;:&quot;\/_files\/4\/8\/8310.jpg&quot;,&quot;szoveges_uzenet_7_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_8&quot;:0,&quot;dpi_8&quot;:&quot;17x23&quot;,&quot;minoseg_8&quot;:&quot;gyenge&quot;,&quot;src_8_0&quot;:&quot;\/_files\/4\/8\/8307.jpg&quot;,&quot;szoveges_uzenet_8_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_8_1&quot;:&quot;\/_files\/4\/8\/8308.jpg&quot;,&quot;szoveges_uzenet_8_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_9&quot;:0,&quot;dpi_9&quot;:&quot;16x23&quot;,&quot;minoseg_9&quot;:&quot;gyenge&quot;,&quot;src_9_0&quot;:&quot;\/_files\/4\/8\/8311.jpg&quot;,&quot;szoveges_uzenet_9_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_9_1&quot;:&quot;\/_files\/4\/8\/8312.jpg&quot;,&quot;szoveges_uzenet_9_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_10&quot;:0,&quot;dpi_10&quot;:&quot;15x23&quot;,&quot;minoseg_10&quot;:&quot;gyenge&quot;,&quot;src_10_0&quot;:&quot;\/_files\/4\/8\/8305.jpg&quot;,&quot;szoveges_uzenet_10_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_10_1&quot;:&quot;\/_files\/4\/8\/8306.jpg&quot;,&quot;szoveges_uzenet_10_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_11&quot;:0,&quot;dpi_11&quot;:&quot;12x16&quot;,&quot;minoseg_11&quot;:&quot;gyenge&quot;,&quot;src_11_0&quot;:&quot;\/_files\/4\/8\/8307.jpg&quot;,&quot;szoveges_uzenet_11_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_11_1&quot;:&quot;\/_files\/4\/8\/8308.jpg&quot;,&quot;szoveges_uzenet_11_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;,&quot;zold_12&quot;:0,&quot;dpi_12&quot;:&quot;12x16&quot;,&quot;minoseg_12&quot;:&quot;gyenge&quot;,&quot;src_12_0&quot;:&quot;\/_files\/4\/8\/8311.jpg&quot;,&quot;szoveges_uzenet_12_0&quot;:&quot;A k\u00e9par\u00e1nyelt\u00e9r\u00e9sb\u0151l ered\u0151 ter\u00fclet feh\u00e9r lesz.&quot;,&quot;src_12_1&quot;:&quot;\/_files\/4\/8\/8312.jpg&quot;,&quot;szoveges_uzenet_12_1&quot;:&quot;A fill elj\u00e1r\u00e1s sor\u00e1n a pirossal jelzett r\u00e9sz lev\u00e1g\u00f3dik.&quot;}"></div>

Answer 1

You can store your data in JSON format.

<?php
$data = array(
 'zold_0' => '0',
 'dpi_0'  => '27x40',
 'minoseg_0' => 'gyenge',
 /* ... other items... */
);
?>

<script>
var data = <?php echo json_encode($data) ?>;
</script>