Best way to send hundreds of variables from page to page?

@simon_matthewsDec 10.2022

I’m working on a website that uses over 200 variables that need to be sent from page to page. Each variable holds a small amount of data. The largest is probably a text string of around 200 characters. I use WordPress for part of the site but not all of it, so the variables need to be sent to WordPress at some point. I already have it working in PHP but I use a MySql database to store the variables. The variables change often, so there are queries happening often. Apparently this would not work well if the site had many users.

So my question is, what would be the best way to store and transfer over 200 variables from page to page on a website without it being too taxing on a server? I’m using PHP but could possibly use JavaScript.

I’m assuming JavaScript localStorage would be the best option, since the variables would be stored locally, but it would be hard for me to convert my site to pure JavaScript. I tried it yesterday and got quite far but some aspects were tricky for me, since I am only a hobby coder. I could do it if it was essential but I’d rather use PHP if I could. It would set me back a while.

Other options I’m aware of are SESSION variables and POST variables. Out of the two I’m assuming POST variables would be better. Would over 200 POST variables be taxing on the server if there were many users online?

Another option would be cookies, but I think I’d have to store lots of my variables in a few cookies not to exceed the cookie limit. Would this be feasible?

Any help would be greatly appreciated! Thanks!

to post a comment

PHP

27 Comments(s) _↴

@ginerjmDec 10.2022 — #200 pieces of data on any web page is an awful lot of stuff for the user to have an interest in. Even 20-30 is a lot. So is this something that your users really have a need for? Have you stepped back and thought about how best to present whatever this is to those users?

If the data items are static you could simply get them from a db and save them in $_SESSION as an array perhaps. And if they are not then you could put them there and query them as needed and again, save them in $_SESSION. But my first thought would be why am I attempting to do this.

@sibertDec 10.2022 — #> @simon_matthews#1649106 Other options I'm aware of are SESSION variables

I tried to use sessionStorage with some success. Note that the JSON format probably will be the best to communicate. It is both simple an advanced to do this using Javascript (callback hell?).

This fiddle load a menu from a database and store it in sessionStorage. Stored persistent as long as you not close the window.

https://jsfiddle.net/mzudb4pw/

Or static example stored in javascript variable:

https://jsfiddle.net/wz57xepg/

@simon_matthewsauthorDec 10.2022 — #@ginerjm#1649107 Thanks for replying! The site allows users to customize photo greetings cards, much like moonpig. The variables store the positions and sizes of photos and text along with the content of the text. These change as the user customizes the card. All the user will see is the card template, so it's all going on in the background.

I already have it working with a MySql database but I suspect the page will run very slowly if there are many users all connected to the database each time the card is updated, which will be after they've uploaded a photo or changed the text. Not all variables will change during an update of course, just the ones associated with the element being edited. The only time all the variables are accessed is when the card template is first displayed.

Maybe the way I've done it will be OK and I'm worrying over nothing? The page is very fast on my local server compared to the WordPress section.

@simon_matthewsauthorDec 10.2022 — #@sibert#1649108 Thanks for replying! I believe sessionStorage is similar to localStorage? Yesterday I wrote a test page in JavaScript using localStorage for my variables. It worked really well. The only problem I have is that it would mean converting my entire site from PHP to JavaScript. That's not impossible but it would be a headache for me as my JavaScript knowledge is virtually zero. The problem I had was that the photo upload part of my script is in a loop for all photos. It worked fine in PHP mixed with JavaScript but when I converted it to pure JavaScript the loop index was being lost. I guess if I can work out how to solve that issue I could continue with pure JavaScript.

@sibertDec 10.2022 — #> @simon_matthews#1649110 I believe sessionStorage is similar to localStorage?

Same same, but different.

LocalStorage is persistent like a hard drive. SessionStore is persistent like a RAM.

When you close the window, the sessionStore is erased and clears the memory for the user.

So I should say that sessionStore is more user friendly IMO.

The sessionStorage leaves no "garbage" in memory.

@ginerjmDec 10.2022 — #I have no idea what sessionStorage or LocalStorage is. Never heard the words before and do not recognize the JS code you just posted.

@sibertDec 10.2022 — #> @ginerjm#1649114 I have no idea what sessionStorage or LocalStorage is.

It is a built in database in your browser. Sort of. It is rather simple. Key and value pair.

localStorage can store up to 5MB per app per browser

sessionStorage is limited by the computers available RAM.

https://jsfiddle.net/1b8pz5dt/2/

@ginerjmDec 10.2022 — #And this 'browser storage' is available to JS, perhaps a newer version of JS than I am aware of? And works with Chrome?

@tracknutDec 10.2022 — #For whatever it's worth, I have a site where I store what is probably a couple MB of data in PHP $_SESSION so that I can have it available across multiple pages. I've done plenty of performance measurement on the site and it's very good, though I don't have tons of users a few at a time is probably the most.

@simon_matthewsauthorDec 10.2022 — #I just got the loops working in JavaScript so I am very tempted to use pure JavaScript for the site in order to use the localStorage for the variables. So far I have successfully built the card template on the screen with all the photos and text in the correct positions and the photos can be uploaded, resized and positioned. I haven't got the text editable yet but I think it's worth pursuing as using JavaScript will mean much less stress on the server. Still not sure if it's worth all the hassle though since it's all working in PHP already. Even the print card page is working and multiple orders can be printed with a click.

@tracknut Session variables was my first choice, since they are so easy to use, but I'm worried that over 200 variables could cause a performance issue. It's good to know that this might still be a viable option for me. I would need to add a unique identifier to each variable so that users can have more than one tab open at a time.

@sibertDec 10.2022 — #> @ginerjm#1649117 And this 'browser storage' is available to JS,

Yes. You can use it with Javascript. let stored = localStorage.data

> perhaps a newer version of JS than I am aware of?

Try the fiddle and you get the answer...

> And works with Chrome?

Yes. Even Safari :-)

@simon_matthewsauthorDec 10.2022 — #@ginerjm#1649117

I'm a beginner to JavaScript and I came across localStorage recently when researching this issue. I can vouch that it works really well and it seems a great way to store variables. They are similar to session variables except they are client side. For example, to store a value it's:

localStorage.setItem("Variable Name", Variable Value);

and to access a variable it's:

var variableName = localStorage.getItem("Variable Name");

It's as simple as that!

@sibertDec 10.2022 — #> @simon_matthews#1649119 Session variables was my first choice, since they are so easy to use, but I'm worried that over 200 variables could cause a performance issue.

You can store the variables as JSON and read from the JSON. You can store 200 variables in a single JSON within one sessionlStorage. No problem. Note that JSON have to be stored as text in sessionStorage. No other data types.

JSON is an array sort of. I have not experienced any performance issues. When you store it in sessonStorage, you read from the memory and this is the fastest available.

Here is an example of JSON: https://api3.go4webdev.org/tsk/all - And this is loaded from Postgresql and not from memory...

@simon_matthewsauthorDec 11.2022 — #So it looks like my best option would be to store my variables in a single JSON database column server side and then move them to a single JSON sessionStorage client side. My first job then should be to convert all my database columns into a single JSON column.

Is there a way to use sessionStorage to store the variables and still use PHP to build the page? In other words, can the variables be taken from sessionStorage and sent to PHP to build the page, or will the page have to be built in JavaScript?

@sibertDec 11.2022 — #> @simon_matthews#1649138 So it looks like my best option would be to store my variables in a single JSON database column server side and then move them to a single JSON sessionStorage client side. My first job then should be to convert all my database columns into a single JSON column.

You do not have to do anything with your database (other than store each variable - key and value - in 2 columns in a table). Send a normal SQL query and convert to JSON. My data is stored as usual and retrieved as JSON (via API)

``<i>
 </i>const response = await fetch('https://api3.go4webdev.org/tsk/all')
 const data = await response.json()<i>
 </i>``

> Is there a way to use sessionStorage to store the variables and still use PHP to build the page? In other words, can the variables be taken from sessionStorage and sent to PHP to build the page, or will the page have to be built in JavaScript?

I think it will be possible, but you have to ask a PHP guru. I have no knowledge of PHP. The way I communicate from frontend to backend is via endpoints. I guess this is possible using PHP also. Note the "guess".

@simon_matthewsauthorDec 11.2022 — #Well I just converted all my database columns into JSON and it loads up much faster when I click on the table name in phpMyAdmin, like waaaaaay faster, so thanks for that! Now for modifying my site code... 😀

@simon_matthewsauthorDec 14.2022 — #Started converting my site to work with the JSON variables. How do I insert values into a JSON MySql row using a prepared statement?

@sibertDec 14.2022 — #> @simon_matthews#1649209 Started converting my site to work with the JSON variables. How do I insert values into a JSON MySql row using a prepared statement?

I am not familiar with MySQL (except from using WordPress), but you may get a hint from how I do this in Postgresql. I guess that you can Google this for MySQL...

``<i>
 </i>INSERT INTO tsk (tsk_subject,tsk_desc)
 SELECT tsk_subject,tsk_desc 
 FROM json_populate_record (NULL::tsk, $1) 
 RETURNING tsk_id<i>
 </i>``

@simon_matthewsauthorDec 14.2022 — #Thanks. I just tried the following and it seems to work:

$stmt = $conn->prepare("INSERT INTO new_card (data) VALUES (?);");

$stmt->bind_param("s", $card_data);

$stmt->execute();

$stmt->close();

The variable $card_data contains the encoded JSON string.

@novice2022Dec 22.2022 — #@ginerjm#1649107

You right man! Even 20 VARs is a lot.

But how can ARRAYS do the job here transferring VARs values from page to page ? Scratching my head! Care to show a ciode sample for all of us ? Like the OP, I too only know SESSIONS and $_POSTs only can do the job.

Very curious to learn something new from you mate in somebody else' thread, this time! ;)

I am sure the OP would appreciate too your code snippet!

@AnawilliamDec 23.2022 — #I had been looking for this topic in different forums, thanks for so much information

@exploradorgtDec 24.2022 — #> Thanks for replying! The site allows users to customize photo greetings cards, much like moonpig. The variables store the positions and sizes of photos and text along with the content of the text. These change as the user customizes the card. All the user will see is the card template, so it's all going on in the background.

@simon_matthews#1649212, I came to this forum searching for something else but your thread caught my attention, I understand what you ask, but sometimes it not just about how (how how), but why and how.

I worked on a web application just like the one you are describing, and my approach was capturing specific data (login, username, etc) and then working on one single page using HTML+CSS and Javascript, I didn't moved the data to other pages (there was no need to transfer 200 variables), instead this was kept on the same page, and the customizing took place using pure html+css and JS modifying an area of the DOM, this was done on the fly, and when needed, graphic stuff was created/modified on the server side using imagemagick producing a graphic (JPG or whatever), this would be displayed as any image via SRC, and when changed, the image would be changed calling another image using SRC too, or just using a random variable at the end of the JPG like this image.jpg?123123123.

There was no need to transfer anything (no variables) from page to page, it was all dynamic on the same page, this saves you a lot of work.

@simon_matthewsauthorDec 24.2022 — #Update:

I have now stored my 200+ MySql columns in one JSON MySql column, which is faster to access. These are transferred to client side localStorage when the page first loads and the page is then built in JavaScript. The user's uploaded photos are also stored client side in IndexedDB during customization and will then be transferred to the server if a purchase is made, along with the variables. So the customization process with all the variables and photos is all handled client side now. I'm assuming this is the best way to do it but of course I'll have to wait and see how it all works when on a live server.

Thanks for the help, and in particular the JSON suggestion.

@simon_matthewsauthorDec 24.2022 — #@novice2022#1649360 Answering for @ginerjm here, with regards to arrays, perhaps you could store an array in a $_SESSION or $_POST variable?

The way I'm storing my variables now though is with localStorage, which (in case you didn't already know) is a client side storage option that can be accessed with JavaScript. Works great!

@simon_matthewsauthorDec 24.2022 — #@exploradorgt#1649396 Thanks for sharing your method, it sounds good, though I'm not fully sure how yours works. The way I've done mine now, all my variables are transferred to localStorage on page load and then all the customization takes place on the client side in JavaScript. Even the uploaded images are stored client side in IndexedDB, so hopefully the server is not stressed at all. The variables and images are only transferred to the server if a purchase is made. I think this is a great improvement, since originally every time a user edited a card or uploaded an image it would be stored on the server even if a purchase isn't made. I imagine this change will save a lot of server resources.

@AnawilliamDec 25.2022 — #Thank you for sharing this method with everyone! Happy Holiday

@exploradorgtDec 27.2022 — #@simon_matthews#1649410 yours is a good method. As for the explanation you provide, all happens locally on the browser and client computer, I see the challenges, that's why the thread exists, and I see other difficulties.

I'll try to expand. You can do a lot on the same page modifying an area you define and manipulating the innerHTML, this could help if your postcard is somehow simple, but yes you can get clever with CSS and layers. Then you can send all the details to the server and get a graphical script to create the JPG.

You can do the same using the CANVAS on the browser, insert a picture, adding text, etc and then saving the canvas as JPG. I know this is entirely possible and you can find examples online.

I'm more familiar with the previous option and sending the final details to the server, as when I created this the canvas function wasn't around, so I used imagemagick on the server.

Back to "staying on the same page", there is a lot you can do manipulating the html and css via DOM+javascript, and a lot you can do using the canvas function, both methods could be used staying on the same page without transferring a lot of variables to the server. Apologies if my explanation isn't too clear.

Also in #PHP _↴

echo $result Checkboxes and IE7 HELP!!!Problem with

Success!

Help @simon_matthews spread the word by sharing this article on Twitter...

Tweet This

Best way to send hundreds of variables from page to page?

27 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

Best way to send hundreds of variables from page to page?

27 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

27 Comments(s) _↴

Also in #PHP _↴