在Javascript中存储大型Cookie。如何

Question

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!

Answer 1

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.