Created
August 8, 2018 14:00
-
-
Save ibnuh/1a75eee9250629efb962ba9a90cc5cd9 to your computer and use it in GitHub Desktop.
Store static data to localStorage with expiration time
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Copyright Muhammad Ibnuh | |
* GITHUB: https://github.com/ibnuh | |
* LICENSE: MIT | |
*/ | |
import Store from 'store' // https://www.npmjs.com/package/store | |
import axios from 'axios' | |
class Static { | |
/** | |
* Initiate the get method | |
* | |
* @param {String} key | |
*/ | |
constructor(key) { | |
this.key = key | |
this.unix = (Date.now() / 1000) | 0 | |
return this.get() | |
} | |
/** | |
* Check for the stored static data expire time | |
*/ | |
expired() { | |
let storedExpire = Store.get('expire') | |
if (storedExpire == null) { | |
return true | |
} | |
return storedExpire < this.unix | |
} | |
/** | |
* Get the data | |
*/ | |
get() { | |
if (this.expired()) { | |
return new Promise(resolve => { | |
// Run ajax request | |
axios.get('static.json').then(response => { | |
// Store the data to localstorage | |
this.store(response.data) | |
resolve(response.data[this.key]) | |
}) | |
}) | |
} else { | |
return new Promise(resolve => { | |
// Get the data from localstorage | |
resolve(Store.get(this.key)) | |
}) | |
} | |
} | |
/** | |
* Store data to localstorage | |
* and set the expire time | |
* | |
* @param {Object} data | |
*/ | |
store(data) { | |
Object.keys(data).forEach(function(key) { | |
Store.set(key, data[key]) | |
}) | |
// Set the expire time to 1 hour from now | |
Store.set('expire', this.unix + 3600) | |
} | |
} | |
export default Static |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"articles":[ | |
{ | |
"title":"Color Psychology: Is there a link between colors...", | |
"link":"https:\/\/lab.bpzoo.com\/color-psychology-is-there-a-link-between-colors-and-human-emotions\/", | |
"author":"Aparna Raghavan", | |
"published_at":"2018-07-05 23:34:51" | |
}, | |
{ | |
"title":"Dream Interpretation \u2013 What do your dreams mean?", | |
"link":"https:\/\/lab.bpzoo.com\/dream-interpretation-an-introduction\/", | |
"author":"Jose Garcia", | |
"published_at":"2018-06-15 22:48:40" | |
} | |
], | |
"fonts":[ | |
{ | |
"name":"Test Font", | |
"family":"test_font" | |
}, | |
{ | |
"name":"Mohave", | |
"family":"mohave" | |
} | |
], | |
"test":123 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let articles; | |
new Static('articles').then(data => { | |
articles = data | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment