add onload

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

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.

__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'));
     }

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;
                 }
             });