{"id":13671608,"url":"https://github.com/mortzdk/jsCache","last_synced_at":"2025-04-27T18:31:26.952Z","repository":{"id":14662131,"uuid":"17380641","full_name":"mortzdk/jsCache","owner":"mortzdk","description":"jsCache is a javascript library that enables caching of javascripts, css-stylesheets and images using my localStorage polyfill. This is especially useful when serving your website for mobile phones, which has limited HTTP caching available, but also speeds up your site in an ordinary webbrowser as it saves HTTP requests and loads all files asynchronously.","archived":false,"fork":false,"pushed_at":"2014-08-01T18:53:48.000Z","size":325,"stargazers_count":427,"open_issues_count":1,"forks_count":23,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-04-20T22:27:48.259Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mortzdk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-03T21:22:08.000Z","updated_at":"2024-11-05T11:04:23.000Z","dependencies_parsed_at":"2022-09-01T22:51:16.021Z","dependency_job_id":null,"html_url":"https://github.com/mortzdk/jsCache","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mortzdk%2FjsCache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mortzdk%2FjsCache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mortzdk%2FjsCache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mortzdk%2FjsCache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mortzdk","download_url":"https://codeload.github.com/mortzdk/jsCache/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250780174,"owners_count":21486028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:14.436Z","updated_at":"2025-04-27T18:31:26.933Z","avatar_url":"https://github.com/mortzdk.png","language":"JavaScript","readme":"jsCache\n=======\n\njsCache is a javascript library that enables caching of javascripts,\ncss-stylesheets and images using one of my earlier projects [localStorage\nPolyfill](https://github.com/mortzdk/localStorage) as the persistent caching\nunit. To obtain the content of the javascript, css, or image files, CORS AJAX\nand a canvas trick for images is used. This enables caching of both locally and\ncross-origin files, if the right HTTP header `Access-Control-Allow-Origin: *`\nis set at the cross-origin. If CORS is not available or something goes wrong\nwith the caching, the library will automatically fallback to do a normal HTTP\nrequest for the files.\n\njsCache is especially useful when serving your website for mobile phones as it\nwill [speed up the loading of your website](http://www.stevesouders.com/blog/2011/03/28/storager-case-study-bing-google/)\nand hearby increase the user experience, by providing a better way to cache the\nfiles than the limited HTTP caching available on most mobile phones. jsCache\nalso speeds up your site in an ordinary webbrowser as it saves HTTP requests\nand loads all the different files asynchronously if possible. The asynchronous \nloading make events such as when the DOM is ready and onload fire earlier and \nhearby make faster rendering of the page.\n\nEventhough all files are attempted to be loaded asynchronously, you still \nhave the possibility to load the files in some specific order. This is done \nusing the `then` method, which will wait for any earlier loads to terminate \nbefore executing its callback function. Hearby you can create a hierarchy of\nscripts, styles and images and load them as you wish. This is really useful\nwhen you want to load libraries with dependencies, as you can ensure that one\nlibrary actually is loaded before using it in another.\n\n#Cross-browser compability\n\nBecause of the use of the localStorage polyfill, this library has compability \nfor persistent storage in almost all browsers both new and old. More about this\ncan be seen at in the [README](https://github.com/mortzdk/localStorage) of the \nlocalStorage polyfill.\n\nWhen it comes to the support of CORS, the first choice of implementation is the \nXMLHttpRequest version 2, which now adays is supported by every major browser. \nMoreover to support older versions of Internet Explorer, the XDomainRequest is\nalso used. If none of these are available, the old version of XMLHttpRequest or\nthe ActiveX versions of AJAX is used. These do not support CORS, so in case of \nsuch use, only the local files will be cached, while CORS files will be loaded\nas a normal asynchronous HTTP request.\n\n![Google Chrome](http://mortz.dk/img/chromium.png) Chrome has support of CORS \nfrom version 3 and support of XMLHttpRequest from version 1.\n\n![Mozilla Firefox](http://mortz.dk/img/firefox.png) Firefox has support of CORS\nfrom version 3.5 and support of XMLHttpRequest from version 1.\n\n![Internet Explorer](http://mortz.dk/img/ie.png) Internet Explorer has support\nof CORS from version 10 using the XMLHttpRequest version 2 and furthermore \nsupport CORS from version 8 using XDomainRequest. In addition to this there is\nsupport for AJAX using either XMLHttpRequest or ActiveX from version 5.\n\n![Safari](http://mortz.dk/img/safari.png) Safari has support of CORS from \nversion 4 and support XMLHttpRequest from version 1.2.\n\n![Opera](http://mortz.dk/img/opera.png) Opera has support of CORS from version \n12 and support XMLHttpRequest from version 7.6.\n\n#Example Usage\n\nIn this example, we use the `domReady` method to ensure that the DOM is ready\nto be manipulated before doing anything. Next we `detect` if the browser is IE\n8 or lower. If so the callback function will be called, i.e. the function\nholding an alert is invoked. Next we `load` a lot of files. By having the files\nin the same load method, we state that the order of which the files are loaded\nare not important and accept that the files are loaded asynchronous. Finally\nthe `then` method is used to ensure that the earlier loaded files are finished\nloading before executing the callback function. This way we ensure that jQuery\nis loaded before we use the library to get the firstChild of the element having\nthe id \"logo\". In the callback function we load an image, append the attributes\nto the image and append the image before the firstChild of the element having\nthe \"logo\" id.\n\n```html\n\u003cscript type=\"text/javascript\"\u003e\njsCache.domReady(function () {\n\tjsCache.detect(\"if lt IE 9\", function () {\n\t\t// Include some IE 8 or lower specific code\n\t\talert(\"IE 8 or lower!\");\n\t}).load(\n\t\t// Load bootstrap CSS and CSS fixes for old IE versions\n\t\t{url : \"//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css\"},\n\t\t{url : \"css/bootstrap-round-corners.css\", detect : \"if lt IE 9\"},\n\t\t{url : \"css/bootstrap-ie7.css\", detect : \"if lt IE 8\"},\n\t\t// Load jQuery library\n\t\t{url : \"//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"}\n\t).then(function () {\n\t\t// Load image and append to element that is gotten by use of jQuery!\n\t\tjsCache.load(\n\t\t\t{\n\t\t\t\turl : \"images/jsCache.png\", \n\t\t\t\tappend : $(\"#logo\")[0].firstChild,\n\t\t\t\tattr : {\n\t\t\t\t\tclss : \"img-responsive center-block\", \n\t\t\t\t\talt : \"jsCache is the most awesome caching tool!\", \n\t\t\t\t\ttitle : \"jsCache is the most awesome caching tool!\"\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t});\n});\n\u003c/script\u003e\n```\n\n#jsCache Object Explanation\n\nThe jsCache object is defined as follows: \n\n\u003cpre\u003e\njsCache {\n\tunsigned long expires;\n\tunsigned long modified;\n\tunsigned long timeout; \n\tObject get(in DOMString key);\n\tjsCache load(in Object obj1, in Object obj 2, ...);\n\tjsCache then(in Function callback);\n\tjsCache remove(in DOMString key);\n\tjsCache clear();\n\tjsCache detect(in DOMString condition, in Function callback);\n\tvoid domReady(in Function callback);\n};\n\u003c/pre\u003e\n\n### expires\n\nThe `expires` variable determines when the cached files is to expire. The\ndefault value is 5 day i.e. `5*24*60*60*1000` milliseconds. If you wish to\nchange this, you simply assign a new value to the variable, with a long value\ndetermining the time in milliseconds.\n\n### modified\n\nThe `modified` variable determines when any of the files was last modified.\nThis can be helpful if you have modified some of your local files and wishes to\nserve these files instead of an old cached version of the file. Default this\nvariable is zero, but this can be changed the same way as the expires variable.\n\n### timeout\n\nThe `timeout` variable determines when the AJAX call should timeout i.e. when\nyou have waited too long for loading a file and should instead try to do it the\nnormal way. This value is default 5 seconds i.e. `5000` milliseconds, but can\nbe changed the same way as the expires variable.\n\n### get(in DOMString key)\n\nThe `get` method is used to get the cached data. This method should always be \nused instead of the get method of the localStorage object, as this method \nappends a string to the key. The method return a file Object containing \ninformation such as url, type, data, attributes etc.\n\n### load(in Object obj1, in Object obj 2, ...)\n\nThe `load` method is used to load files. The method takes an infite amount of\nspecial objects containing information about the files to be loaded. Such an\nobject have the following structure:\n\n\u003cpre\u003e\nObject {\n\tDOMString url;\n\tDOMString type;\n\tboolean cache;\n\tDOMString detect;\n\tObject append;\n\tObject attr;\n\tDOMString format;\n}\n\u003c/pre\u003e\n\nThe object has a lot of different variables available, but the only required \nvariable is the `url` variable, which should hold the address of the file to be \nloaded.\n\nThe `type` variable is optional. This variable can be used to statically \ndetermine the type of a file. When loading files, jsCache will dynamically\ntry to determine the type of the file, but if this variable is set, the file \nwill always be handled as the set value.\n\nThe `cache` variable is optional. This variable should hold a boolean that\ndetermines whether to cache the file or not. If this variable is not set or is\nset to true, jsCache will cache the file. If the variable is set to false, no \ncaching will be performed on the file.\n\nThe `detect` variable is optional. This variable works the same way as the\n`detect` method of the jsCache object i.e. this variable should hold a HTML\nconditional comments value. If the condition is true, the file will be loaded.\n\nThe `append` variable is optional. This variable should hold an object that you\nwish to insert the files before.\n\nThe `attr` variable is optional. This variable holds an object of attributes.\nThese attributes are appended to the file loaded. For example if you wish to\ngive an image file a title or an alt attribute, you have to specify these in\nthis object. See the example usage for more information.\n\nThe `format` variable is optional. This is a special variable that currently\nonly should be used when using a image wrapper to get the base64 value of the\nimage. If such a wrapper is used, the format variable should be assigned the\n\"base64\". In PHP such a wrapper would look something like this:\n\n```php\n\u003c?php\n$data = base64_encode(file_get_contents(\"images/jsCache.png\"));  \necho(\"data:image/png;base64,\" . $data);\n?\u003e\n```\n\n### then(in Function callback);\n\nThe `then` method is used to guarantee that files that has previously been \nserved to the `load` method, is fully loaded before the callback function of \nthis method is invoked. This is extremely helpful you are dependent on \nlibraries or other files.\n\n### remove(in DOMString key);\n\nThe `remove` method is used to remove a specific file from the cache. This\nmethod should always be used instead of the get method of the localStorage\nobject, as this method appends a string to the key.\n\n### clear();\n\nThe `clear` method is used to remove all cached files from the cache.\n\n### detect(in DOMString condition, in Function callback);\n\nThe `detect` method is another extremely useful method when having to detect if\nthe browser is Internet Explorer. Most of the time all other browsers than IE\nis rendering your website more or less consistently, but as always IE is a pain\nthat needs special fixes to render your site properly. This method behave in\nthe same way as the HTML conditional comments and the method should be handled\na string such as `if IE` and a callback function to be called if the condition\nis true.\n\n### domReady(in Function callback);\n\nThe `domReady` method is used to wait for the DOM to be ready for manipulation.\nThis is useful when having to manipulate with the DOM as any manipulation \nbefore this state is not ensured to be successful. It is recommended to always\nuse this method.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmortzdk%2FjsCache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmortzdk%2FjsCache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmortzdk%2FjsCache/lists"}