how to store (in php) and use (in javascript) large amount of data

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>

Answers


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>

I'd recommend that you emit that data in the form of a JSON message from a distinct PHP module separate from the HTML page.

In your html page, you install a small amount of javascript that loads the JSON message asynchronously, after the page has loaded. You can do this simply with jquery . There are lots of examples.

Then, from within the javascript logic, you can parse the JSON file and do whatever you want with it, on the client side.


One assumes that this page/data comes from the server in the first place. If so, why not use a session? If you do use a session you do not need to throw this data to the client and the client does not need to throw the data back to the server (where it came from in the first place).


Need Your Help

disable mouse drag to select several slots on RadScheduleView

c# wpf telerik radscheduleview

I have a RadScheduleView that allows the end-user to select slots. I am capturing the selections via RadScheduleView.SelectedSlot, saving those to a collection and the collection is the bind source...