From cfbfdfb5d6115e7dbc558929419f67f2fcb88892 Mon Sep 17 00:00:00 2001
From: freek <freek@spatie.be>
Date: Thu, 19 Jan 2017 20:09:30 +0100
Subject: [PATCH] add onload

---
 CHANGELOG.md                 |  5 ++++-
 README.md                    | 26 ++++++++++++++++++++++++++
 __tests__/save-state.test.js | 16 ++++++++++++++++
 src/save-state.js            |  5 +++++
 4 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dbe0932..7e8db0d 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,5 +2,8 @@
 
 All Notable changes to `vue-save-state` will be documented in this file
 
-## 1.0.0 - 201X-XX-XX
+## 1.1.0 - 2017-01-17
+- Add `onLoad` option
+
+## 1.0.0 - 2017-01-02
 - Initial release
diff --git a/README.md b/README.md
index 2d0cc51..640f26a 100644
--- a/README.md
+++ b/README.md
@@ -70,6 +70,8 @@ export default {
 
 With these steps done any change to the state of your component will get written to local storage. The value given in `cacheKey` determines to which key in local storage the state of this component will get written. When the component is created it'll restore its state from local storage.
 
+## Only save certain properties of the state
+
 There's also a configuration option to determine which properties of the state should be saved/restored:
 
 ```js
@@ -93,6 +95,30 @@ export default {
 
 With this configuration only the `title` and `text` properties of your state will get saved/restored.
 
+## Transforming the state on load
+
+If you want to transform the values stored in local storage before loading the into the state of the component add an `onLoad` function to the object return by `getSaveStateConfig`.
+
+```js
+import saveState from 'vue-save-state';
+
+export default {
+    
+    // ...
+
+    methods: {
+
+        getSaveStateConfig() {
+            return {
+                'onLoad': (key, value) => {
+                    //return a new value
+                },
+            };
+        },
+    },
+}
+```
+
 ## Change log
 
 Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
diff --git a/__tests__/save-state.test.js b/__tests__/save-state.test.js
index e23261a..641e3bd 100644
--- a/__tests__/save-state.test.js
+++ b/__tests__/save-state.test.js
@@ -109,6 +109,22 @@ describe('save-state', () => {
         assert.isUndefined(getLocalStorageContent().string);
     });
 
+    it('will use the onload function to transform the date on loading it from local storage', async() => {
+        localStorage.setItem('testComponent', JSON.stringify({ 'string': 'restored from state' }));
+
+        vm = createTestComponent({
+            'configuration': {
+                'cacheKey': 'testComponent',
+                'onLoad': (key, value) => `${key}-${value}`,
+            },
+        });
+
+        await Vue.nextTick(() => {
+        });
+
+        assert.equal(vm.string, 'string-restored from state');
+    });
+
     function getLocalStorageContent() {
         return JSON.parse(localStorage.getItem('testComponent'));
     }
diff --git a/src/save-state.js b/src/save-state.js
index 834cf6a..3cc5b47 100755
--- a/src/save-state.js
+++ b/src/save-state.js
@@ -17,6 +17,7 @@ export default {
 
     methods: {
         loadState() {
+
             const savedState = getSavedState(this.getSaveStateConfig().cacheKey);
 
             if (!savedState) {
@@ -26,6 +27,10 @@ export default {
             forEach(savedState, (value, key) => {
 
                 if (this.attributeIsManagedBySaveState(key)) {
+                    if (this.getSaveStateConfig().onLoad) {
+                        value = this.getSaveStateConfig().onLoad(key, value);
+                    }
+
                     this.$data[key] = value;
                 }
             });