Handle using custom storage instead of localStorage

release
Etienne Lemay 2017-11-02 20:57:29 -04:00
parent 9fda2d9803
commit 9cd6494c39
3 changed files with 67 additions and 18 deletions

View File

@ -177,6 +177,30 @@ emojiIndex.search('christmas').map((o) => o.native)
// => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️] // => [🎄, 🎅🏼, 🔔, 🎁, ⛄️, ❄️]
``` ```
## Storage
By default EmojiMart will store user chosen skin and frequently used emojis in `localStorage`. That can however be overwritten should you want to store these in your own storage.
```js
import { store } from 'emoji-mart'
store.setHandlers({
getter: (key) => {
// Get from your own storage (sync)
},
setter: (key, value) => {
// Persist in your own storage (can be async)
}
})
```
Possible keys are:
| Key | Value | Description |
| skin | `1, 2, 3, 4, 5, 6` | |
| frequently | `{ 'astonished': 11, '+1': 22 }` | An object where the key is the emoji name and the value is the usage count |
| last | 'astonished' | (Optional) Used by `frequently` to be sure the latest clicked emoji will always appear in the “Recent” category |
## Features ## Features
### Powerful search ### Powerful search
#### Short name, name and keywords #### Short name, name and keywords

View File

@ -19,10 +19,16 @@ const DEFAULTS = [
'poop', 'poop',
] ]
let frequently = store.get('frequently') let frequently, initialized
let defaults = {} let defaults = {}
function init() {
initialized = true
frequently = store.get('frequently')
}
function add(emoji) { function add(emoji) {
if (!initialized) init()
var { id } = emoji var { id } = emoji
frequently || (frequently = defaults) frequently || (frequently = defaults)
@ -34,6 +40,7 @@ function add(emoji) {
} }
function get(perLine) { function get(perLine) {
if (!initialized) init()
if (!frequently) { if (!frequently) {
defaults = {} defaults = {}

View File

@ -5,6 +5,20 @@ const _JSON = JSON
var isLocalStorageSupported = var isLocalStorageSupported =
typeof window !== 'undefined' && 'localStorage' in window typeof window !== 'undefined' && 'localStorage' in window
let getter
let setter
function setHandlers(handlers) {
handlers || (handlers = {})
getter = handlers.getter
setter = handlers.setter
}
function setNamespace(namespace) {
NAMESPACE = namespace
}
function update(state) { function update(state) {
for (let key in state) { for (let key in state) {
let value = state[key] let value = state[key]
@ -13,27 +27,31 @@ function update(state) {
} }
function set(key, value) { function set(key, value) {
if (!isLocalStorageSupported) return if (setter) {
try { setter(key, value)
window.localStorage[`${NAMESPACE}.${key}`] = _JSON.stringify(value) } else {
} catch (e) {} if (!isLocalStorageSupported) return
try {
window.localStorage[`${NAMESPACE}.${key}`] = _JSON.stringify(value)
} catch (e) {}
}
} }
function get(key) { function get(key) {
if (!isLocalStorageSupported) return if (getter) {
try { return getter(key)
var value = window.localStorage[`${NAMESPACE}.${key}`] } else {
} catch (e) { if (!isLocalStorageSupported) return
return try {
} var value = window.localStorage[`${NAMESPACE}.${key}`]
} catch (e) {
return
}
if (value) { if (value) {
return JSON.parse(value) return JSON.parse(value)
}
} }
} }
function setNamespace(namespace) { export default { update, set, get, setNamespace, setHandlers }
NAMESPACE = namespace
}
export default { update, set, get, setNamespace }