Skip to content

Commit afcb6ef

Browse files
committed
Update README.md
1 parent af33500 commit afcb6ef

File tree

1 file changed

+153
-2
lines changed

1 file changed

+153
-2
lines changed

README.md

Lines changed: 153 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,153 @@
1-
# time-based-cache-js
2-
A Laravel-like Cache Store for Javascript
1+
# Time Based Cache Store for Javascript
2+
3+
A [Laravel-like Cache Store](https://laravel.com/docs/8.x/cache) for Javascript.
4+
5+
# Instalation
6+
7+
```
8+
npm i time-based-cache
9+
```
10+
11+
# How it works
12+
This class makes use of the browser's local storage API in order to keep a value until a determined datetime, although a value can be also set to "never" expire. Each key receives a `value`, a `createdAt` timestamp and a `expiresAt` timestamp (which can be `null`). Upon usage, the `expiresAt` at will be evaluated to see wether or not the cached value is still valid.
13+
14+
# Usage
15+
16+
## Creating the Cache Store
17+
18+
```
19+
// Import the class
20+
import CacheStore from 'time-based-cache';
21+
22+
// Create a new cache
23+
let cache_store = new CacheStore();
24+
```
25+
26+
An identifier (cacheKeyPrefix) can (and should) be set, so that you can use multiple store, the these stores can use the same cache key without any conflicts
27+
28+
```
29+
// Create a new cache with a prefix
30+
let cache_store_1 = new CacheStore('store_prefix_1');
31+
32+
let cache_store_2 = new CacheStore('store_prefix_2');
33+
```
34+
35+
## Setting a value
36+
37+
### Everlasting
38+
A value can be set without an expiring date, so as long as the key is still in the local storage, it'll be retrieved. Let's say you need to store a list of plans
39+
40+
```
41+
let plans = [
42+
{
43+
id: 1,
44+
name: 'Plan A'
45+
},
46+
{
47+
id: 2,
48+
name: 'Plan B'
49+
}
50+
];
51+
52+
cache_store.put('cached_plans', plans);
53+
```
54+
55+
### For an amount of seconds
56+
A value can be set to last for a defined amount of seconds
57+
58+
```
59+
// Store previously mentioned plans for 5 minutes
60+
cache_store.put('cached_plans', plans, 5 * 60);
61+
```
62+
63+
### Until a certain date
64+
65+
A value can bet set to last until a defined date
66+
67+
```
68+
// Create a date
69+
let future_date = new Date();
70+
71+
// Add days to the date
72+
future_date.setHours(date.getDays() + 15);
73+
74+
// Store previously mentioned plans for 15 days
75+
cache_store.put('cached_plans', plans, future_date);
76+
```
77+
78+
This kind of looks better than (or not, I personally hate working with dates in Javascript)
79+
```
80+
cache_store.put('cached_plans', plans, 15 * 24 * (3600));
81+
```
82+
83+
## Getting a value
84+
85+
Because it wouldn't make sense to put the value if you couldn't get it back.
86+
87+
```
88+
let plans = cache_store.get('cached_plans');
89+
```
90+
91+
Assuming the cache hasn't expired, plans now holds the list of plans, or `undefined`, if it was never set or has expired.
92+
93+
## Deleting a value
94+
95+
Because sometimes there're things we need to forget
96+
97+
```
98+
cache_store.delete('cached_plans');
99+
```
100+
101+
## Remember
102+
You can also send a callback to be remembered, so you don't have to repeat it many times.
103+
104+
```
105+
let processed_stuff = cache_store.remember('processed_stuff', 5 * 60, () => {
106+
// costly operations that take a long time
107+
108+
return processed_stuff;
109+
});
110+
```
111+
112+
⚠️<b>Be aware that, before the callback is executed, an `undefined` value is set to the cache key, so if the remember method is executed with the same key, and the previous call hasn't finished, it will not run again, and an `undefined` value will be returned (assuming the cache lifespan hasn't ended, of course), until the first execution completes</b>⚠️
113+
114+
There's a limitation: async callbacks will return a Promise right away. If you need to do async stuff, do it like this:
115+
116+
Let's say you're rendering a component and you want to retrieve a store's products.
117+
118+
```
119+
import { useState, useEffect } from "react";
120+
import Http from "../../Http";
121+
import CacheStore from 'time-based-cache';
122+
123+
let cache_store = new CacheStore();
124+
125+
const Products = ({store}) => {
126+
127+
const [products, setProducts] = useState([]);
128+
129+
useEffect(() => {
130+
cache_store.remember(`store-${store.id}-products`, 5 * 60, () => {
131+
Http.get(`/api/store/${store.id}/products`).then((res) => setInvoices(res.data.data));
132+
});
133+
134+
}, []);
135+
136+
...
137+
}
138+
139+
export default Products;
140+
141+
```
142+
143+
## Remember Forever
144+
This is basically the previous method, but a `null` is sent as the second parameter.
145+
146+
```
147+
let processed_stuff = cache_store.rememberForever('processed_stuff', () => {
148+
// costly operations that take a long time
149+
150+
return processed_stuff;
151+
});
152+
```
153+
This may cause some unwanted behaviour if the cache key is left unchecked, so be aware of when to clean it, if necessary.

0 commit comments

Comments
 (0)