{"id":22994889,"url":"https://github.com/himmlisch-studios/alpinejs-cache","last_synced_at":"2026-02-12T08:07:32.967Z","repository":{"id":266631750,"uuid":"898813086","full_name":"Himmlisch-Studios/alpinejs-cache","owner":"Himmlisch-Studios","description":"Persist and expire data easily with Alpine JS","archived":false,"fork":false,"pushed_at":"2024-12-05T20:18:06.000Z","size":414,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-20T12:51:45.731Z","etag":null,"topics":["alpine-js","alpinejs","alpinejs-directive","alpinejs-plugin","cache","esmodules","localstorage","ttl-cache","zero-dependency"],"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/Himmlisch-Studios.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yaml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["luanhimmlisch"]}},"created_at":"2024-12-05T04:47:01.000Z","updated_at":"2025-04-09T03:28:04.000Z","dependencies_parsed_at":"2025-04-22T17:33:07.375Z","dependency_job_id":"fb59a850-3d96-463b-ba36-28248f43812b","html_url":"https://github.com/Himmlisch-Studios/alpinejs-cache","commit_stats":null,"previous_names":["himmlisch-studios/alpinejs-cache"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Himmlisch-Studios/alpinejs-cache","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Himmlisch-Studios%2Falpinejs-cache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Himmlisch-Studios%2Falpinejs-cache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Himmlisch-Studios%2Falpinejs-cache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Himmlisch-Studios%2Falpinejs-cache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Himmlisch-Studios","download_url":"https://codeload.github.com/Himmlisch-Studios/alpinejs-cache/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Himmlisch-Studios%2Falpinejs-cache/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29361812,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T01:03:07.613Z","status":"online","status_checked_at":"2026-02-12T02:00:06.911Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["alpine-js","alpinejs","alpinejs-directive","alpinejs-plugin","cache","esmodules","localstorage","ttl-cache","zero-dependency"],"created_at":"2024-12-15T05:27:41.000Z","updated_at":"2026-02-12T08:07:32.953Z","avatar_url":"https://github.com/Himmlisch-Studios.png","language":"JavaScript","funding_links":["https://github.com/sponsors/luanhimmlisch"],"categories":[],"sub_categories":[],"readme":"# Alpine JS Cache\n\nSometimes you want to _persist_ data, but not _until the end of times_...\n\nWith **Alpine Cache**, you can easily persist the state across page loads until an expiration date.\n\nSpecially useful to remember temporary UI state, to cache API calls, to schedule recurring notifications, etc.\n\nYou can even use it inside Alpine context and outside of it, without losing reactivity!\n\n![](https://raw.githubusercontent.com/Himmlisch-Studios/alpinejs-cache/master/examples/thumbnail.png)\n\n## Installation\n\n### From a script tag\n\nYou can import Alpine Cache through a CDN like:\n\n```html\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003cscript src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\" defer\u003e\u003c/script\u003e\n\n        \u003cscript src=\"https://unpkg.com/alpinejs-cache@latest/dist/cache.min.js\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n\u003c/html\u003e\n```\n\n### As a module\n\nIf you're using a web bundler, you can install Alpine Cache via NPM:\n\n```\nnpm i alpinejs-cache -D\n```\n\nThen import it and register the plugin:\n\n```js\nimport Alpine from 'alpinejs'\nimport cache from 'alpinejs-cache'\n\nAlpine.plugin(cache)\n\nwindow.Alpine = Alpine\n\nAlpine.start()\n```\n\n## Example\n\nYou can find an examples on the `examples/` directory of this repository.\n\n## Usage\n\nCache was inspired by [Persist](https://alpinejs.dev/plugins/persist), and so, they share the same caveats and style of configuration.\n\n### $cache\n\nThe primary API for using this plugin is the magic `$cache` method.\n\n```html\n\u003cdiv x-data=\"{ count: $cache(0).for(20).as('my-counter') }\"\u003e\n    \u003cbutton x-on:click=\"count++\"\u003eIncrement\u003c/button\u003e\n    \u003cspan x-text=\"count\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\nYou can set a default value, and an optional custom key which will be used to save the data with the `.as` modifier.\n\nUnlike `$persist`, you can set the expiration time of the value, in seconds, with the `.for` modifier. Each time the value gets changed the cache will be revalidated by `.for` seconds (60 by default). If the cache gets invalidated the default value is set again on load.\n\nAn `.until` modifier can be used instead of `.for`, to put a timestamp instead of the amount of seconds.\n\n### Custom Storage Driver\n\nAlpine Cache uses the [localStorage Browser API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) by default to store all data.\n\nYou can change the storage driver for a single record with the `.using` modifer.\n\n```html\n\u003cdiv x-data=\"{ count: $cache(0).using(cookieStorage).for(10) }\"\u003e\n    \u003cbutton x-on:click=\"count++\"\u003eIncrement\u003c/button\u003e\n\n    \u003cspan x-text=\"count\"\u003e\u003c/span\u003e\n\u003c/div\u003e\n```\n\nYou can also change the default storage driver globally via:\n\n```js\nAlpine.cache.defaultDriver = MyCustomStorageDriver;\n```\n\nTo create a custom driver, you must implement the following contract:\n\n```ts\ninterface CacheStorageDriver {\n    setItem: (key: string, record: CacheRecord) =\u003e void,\n    getItem: (key: string) =\u003e ?CacheRecord\n}\n```\n\nThe way Alpine Cache works, is with simple `CacheRecord` objects that wraps your data and adds a timestamp to it:\n\n```ts\ntype CacheRecord = {\n    data: any,\n    expires_at: number\n}\n```\n\nYou're responsable to serialize and deserialize this construct on the `setItem` and `getItem` methods.\n\n### Using outside Alpine context\n\nYou can `get`, `set` and manually `invalidate` data, outside the Alpine context while still maintaining the reactivity of the Alpine components that are using `$cache`.\n\n`Alpine.cache` is an object with the following signature:\n\n```ts\ntype cacheUtils = {\n    defaultDriver: CacheStorageDriver,\n    invalidate: (key: string, storage: CacheStorageDriver?) =\u003e void,\n    set: (key: string, data: any, time: number, storage: CacheStorageDriver?) =\u003e void,\n    get: (key: string, storage: CacheStorageDriver?) =\u003e any\n}\n```\n\n`set` and `get` works as you expect they would. `invalidate` is a shorthand to `set` the value to `undefined` which Alpine Cache detects as an expired record. The `storage` parameter is the equivalent to the `.using` modifier, to override the default driver.\n\n### Using $cache with Alpine.data\n\nAs it happens with `$persist`, if you want to use `$cache` within `Alpine.data`, you need to be sure to use a standard function instead of an arrow function.\n\n```js\nAlpine.data('productsIndex', function () {\n    return {\n        fetchData: this.$cache(null).until(Date.now() + 1000 * 5),\n        init(){\n            if(!this.fetchData){\n                this.$nextTick(async () =\u003e {\n                    this.fetchData = await fetch(/*...*/).then((v) =\u003e v.json());\n                })\n            }\n        }\n    }\n})\n```\nA caveat not explained in the docs. The values from `$cache` (and `$persist`), are **read-only** on the first tick.\nNo data will be saved if you try to set the properties on `init()`. If this is your case, wrap the setter in a `$nextTick` callback.\n\n\n## Stats\n\n![](https://img.shields.io/bundlephobia/min/alpinejs-cache)\n![](https://img.shields.io/npm/v/alpinejs-cache)\n![](https://img.shields.io/npm/dt/alpinejs-cache)\n![](https://img.shields.io/github/license/Himmlisch-Studios/alpinejs-cache)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhimmlisch-studios%2Falpinejs-cache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhimmlisch-studios%2Falpinejs-cache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhimmlisch-studios%2Falpinejs-cache/lists"}