CODEWITHSUNDEEP
phpjavascriptcookies
user1020317
user1020317

Reputation: 654

Storing large Cookies in Javascript.. How to

For the simplicity of the question, I will pretend my site works like this: I have an array of data in Javascript which is used on nearly every page of my site. I use PHP to print this javascript array, on every page. Now this array has grown to about 0.5MB, so It is now lagging the system as you can imagine. The easy option would be to put something in the cache, so the array doesn't need to be printed every time, however, the array that stores the values is updated from time to time, while the user is browsing different pages.

My initial thought was to use javascript cookies to store the information, and maybe just do a quick PHP to check if the array has changed, and If it has delete the old cookie and download the updated array into that cookie. However I am led to believe that cookies have a size limit.

Anyone have any suggestions as to a good approach to this?

Thanks for the help!

Upvotes: 2

Views: 1776

Answers (3)

goat
goat

Reputation: 31823

Cookies are sent to your server for each web request(each html page, each image, each css file etc...). Making a user upload 1/2 mb of data on every web request is insane. Cookies should be extremely minimal for this reason.

You don't need anything exotic for this.

Have a php script output the neccesary data. Have it send http headers which suggest to the browser it can cache the request for a long time. To force it to update the data(when it changes), change the url of the script src, by changing a query string argument. Since the url changes, the browser must request the file if it has never requested the url before. Use a sequential numbering scheme to guarantee uniqueness.

eg, 1234 is the latest revision number

<script src="js-data.php?version=1234"></script>

js-data.php

<?php
header("cache-control: max-age=1000000");
header("content-type: application/javascript");
echo 'var data = {...}';

alternatively, instead of changing a revision number, make the js-data.php script support conditional http requests, which is designed exactly for this reason. You can read mopre about http headers and how freshness is resolved here http://www.mnot.net/cache_docs/

while the former method is more efficient in that the browser doesnt need to make additional http requests to the webserver to keep checking for freshness, a benefit of the second method is that you don't need to add php code with the logic for outputting the latest revision number to all your html pages. All the logic is contained within the js-data.php script. This is much easier to manage and work with.

Upvotes: 3

Eugeniu Torica
Eugeniu Torica

Reputation: 7574

I would solve this problem in the following manner.
Write a php file which returns a javascript content with your array. In that file you should detect if there are some changes so that array need to be updates. If array should be updated return the content otherwise return http status 304 which means that resources is not not modified

The content of php file should look like this: script.php

<?php
$nochanges = TRUE;

//Detect if changes are required

if($nochanges)
{
  http_send_status (304);
} 
else
{
?>
<script>
  myarray=[1,2,3];
<script>

content of html

PS: Sorry, I don't use php so I don't really know how to do it properly.

Upvotes: 2

dronus
dronus

Reputation: 11282

You could use WebStorage to do that. That is limited to quite modern but not necessarily cutting edge browsers. See here: Wikipedia WebStorage

Upvotes: 0

Related Questions