From ebf9fe6a987842966d32f881902f233a67787d2f Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 20 Feb 2017 18:25:19 +0100 Subject: Pull in persistence plugin, don't blow up on full storage. --- src/lib/persisted_state.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/lib/persisted_state.js (limited to 'src/lib/persisted_state.js') diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js new file mode 100644 index 00000000..67ecc1ea --- /dev/null +++ b/src/lib/persisted_state.js @@ -0,0 +1,65 @@ +import merge from 'lodash.merge' +import objectPath from 'object-path' + +const defaultReducer = (state, paths) => ( + paths.length === 0 ? state : paths.reduce((substate, path) => { + objectPath.set(substate, path, objectPath.get(state, path)) + return substate + }, {}) +) + +const defaultStorage = (() => { + const hasLocalStorage = typeof window !== 'undefined' && window.localStorage + if (hasLocalStorage) { + return window.localStorage + } + + class InternalStorage { + setItem (key, item) { + this[key] = item + return item + } + getItem (key) { + return this[key] + } + removeItem (key) { + delete this[key] + } + clear () { + Object.keys(this).forEach(key => delete this[key]) + } + } + + return new InternalStorage() +})() + +export default function createPersistedState ({ + key = 'vuex', + paths = [], + getState = (key, storage) => { + const value = storage.getItem(key) + return value && value !== 'undefined' ? JSON.parse(value) : undefined + }, + setState = (key, state, storage) => storage.setItem(key, JSON.stringify(state)), + reducer = defaultReducer, + storage = defaultStorage, + subscriber = store => handler => store.subscribe(handler) +} = {}) { + return store => { + const savedState = getState(key, storage) + if (typeof savedState === 'object') { + store.replaceState( + merge({}, store.state, savedState) + ) + } + + subscriber(store)((mutation, state) => { + try { + setState(key, reducer(state, paths), storage) + } catch (e) { + console.log("Couldn't persist state:") + console.log(e) + } + }) + } +} -- cgit v1.2.3-70-g09d2 From ce6fb91501c43211795514b7c51069c29cb15488 Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 20 Feb 2017 18:38:18 +0100 Subject: Throttle saving data, once every 5 seconds is enough. --- src/lib/persisted_state.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'src/lib/persisted_state.js') diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js index 67ecc1ea..1e953361 100644 --- a/src/lib/persisted_state.js +++ b/src/lib/persisted_state.js @@ -1,5 +1,6 @@ import merge from 'lodash.merge' import objectPath from 'object-path' +import { throttle } from 'lodash' const defaultReducer = (state, paths) => ( paths.length === 0 ? state : paths.reduce((substate, path) => { @@ -33,6 +34,10 @@ const defaultStorage = (() => { return new InternalStorage() })() +const defaultSetState = (key, state, storage) => { + return storage.setItem(key, JSON.stringify(state)) +} + export default function createPersistedState ({ key = 'vuex', paths = [], @@ -40,7 +45,7 @@ export default function createPersistedState ({ const value = storage.getItem(key) return value && value !== 'undefined' ? JSON.parse(value) : undefined }, - setState = (key, state, storage) => storage.setItem(key, JSON.stringify(state)), + setState = throttle(defaultSetState, 5000), reducer = defaultReducer, storage = defaultStorage, subscriber = store => handler => store.subscribe(handler) -- cgit v1.2.3-70-g09d2 From 6e388c01264b44ed54c89970ac2abacb08f6ff8d Mon Sep 17 00:00:00 2001 From: Roger Braun Date: Mon, 20 Feb 2017 18:54:09 +0100 Subject: Compress saved state with zlib. --- package.json | 1 + src/lib/persisted_state.js | 10 ++++++++-- yarn.lock | 4 ++++ 3 files changed, 13 insertions(+), 2 deletions(-) (limited to 'src/lib/persisted_state.js') diff --git a/package.json b/package.json index f188eaa7..c23f001e 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "karma-mocha-reporter": "^2.2.1", "node-sass": "^3.10.1", "object-path": "^0.11.3", + "pako": "^1.0.4", "sanitize-html": "^1.13.0", "sass-loader": "^4.0.2", "tributejs": "^2.1.0", diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js index 1e953361..de1e5383 100644 --- a/src/lib/persisted_state.js +++ b/src/lib/persisted_state.js @@ -1,6 +1,7 @@ import merge from 'lodash.merge' import objectPath from 'object-path' import { throttle } from 'lodash' +import { inflate, deflate } from 'pako' const defaultReducer = (state, paths) => ( paths.length === 0 ? state : paths.reduce((substate, path) => { @@ -35,14 +36,19 @@ const defaultStorage = (() => { })() const defaultSetState = (key, state, storage) => { - return storage.setItem(key, JSON.stringify(state)) + return storage.setItem(key, deflate(JSON.stringify(state), { to: 'string' })) } export default function createPersistedState ({ key = 'vuex', paths = [], getState = (key, storage) => { - const value = storage.getItem(key) + let value = storage.getItem(key) + try { + value = inflate(value, { to: 'string' }) + } catch (e) { + console.log("Couldn't inflate value... Maybe upgrading") + } return value && value !== 'undefined' ? JSON.parse(value) : undefined }, setState = throttle(defaultSetState, 5000), diff --git a/yarn.lock b/yarn.lock index b847921c..0d26977f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4041,6 +4041,10 @@ pac-resolver@~1.2.1: regenerator "~0.8.13" thunkify "~2.1.1" +pako@^1.0.4: + version "1.0.4" + resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.4.tgz#412cc97c3b7ff06dc6c2557fd4f03d06f5e708d4" + pako@~0.2.0: version "0.2.9" resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75" -- cgit v1.2.3-70-g09d2