diff --git a/README.md b/README.md index e2a1c32..bb120d3 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # WebStorage Decorators -A Javascript library that adds property decorators to sync a class property with the local or session storage. +A Javascript library that adds property decorators to sync a class property with the local or session storage. Useful +for persisting themes or local settings over reloads or maintaining filters/search options in the current user session. ## Quick Setup 1. Install with: `npm install --save webstorage-decorators` @@ -25,7 +26,7 @@ export class MyCustomClass { ### Custom Functions You can technically store anything inside local/session storage however everything is serialized using javascript's JSON, so anything extra (prototypes, functions, etc) will be lost. However if you provide a default value, it will be copied & -the data injected, giving you a workaround to accessing static properties. +the data injected, giving you a workaround to accessing static properties (Does not work with arrays). ```typescript class Person { @@ -39,7 +40,7 @@ console.log(example.fullName()) // ERROR: fullName function doesn't exist LocalStorage.setItem('example2', '{"first": "John", "last": "Smith"}'); @LocalStorage(new Person(null, null)) example2!: Person; -console.log(example.fullName()) // Will work because we have a default object to figure out type +console.log(example2.fullName()) // Works because we have a default object to copy type from ``` ### Impure Functions diff --git a/lib/webstorage.js b/lib/webstorage.js index 8256e64..c191500 100644 --- a/lib/webstorage.js +++ b/lib/webstorage.js @@ -44,16 +44,19 @@ export function SessionStorage(defaultValue, opts = {}) { * @param opts Any additional options */ function fromStorage(storage, opts) { - let storedVal = JSON.parse(storage.getItem(opts.key)); - if (storedVal == null) { + let storedVal = storage.getItem(opts.key); + if (storedVal == null || storedVal == "" || storedVal == "undefined") { if (opts.default == null) return null; if (opts.default != 'object') return opts.default; if (opts.default.constructor != null) return Object.assign(new opts.default.constructor(), opts.default); - return Object.assign({}, opts.default); + let temp = Object.assign({}, opts.default); + Object.setPrototypeOf(temp, Object.getPrototypeOf(opts.default)); + return temp; } + storedVal = JSON.parse(storedVal); if (opts.encryptWith != null) storedVal = JSON.parse(crypto.AES.decrypt(storedVal, opts.encryptWith).toString(crypto.enc.Utf8)); if (typeof storedVal != 'object' || !Array.isArray(storedVal)) @@ -77,10 +80,8 @@ function decoratorBuilder(storage, opts) { let field = fromStorage(storage, opts); Object.defineProperty(target, key, { get: function () { - if (field != fromStorage(storage, opts)) { - console.log(typeof opts.default, field, fromStorage(storage, opts)); + if (field != fromStorage(storage, { key: opts.key, encryptWith: opts.encryptWith })) target[key] = field; - } return field; }, set: function (value) { diff --git a/lib/webstorage.js.map b/lib/webstorage.js.map index 32cbabb..a24ee7f 100644 --- a/lib/webstorage.js.map +++ b/lib/webstorage.js.map @@ -1 +1 @@ -{"version":3,"file":"webstorage.js","sourceRoot":"","sources":["../src/webstorage.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"webstorage.js","sourceRoot":"","sources":["../src/webstorage.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/package.json b/package.json index cd3239b..7db4a82 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,13 @@ { "name": "webstorage-decorators", - "version": "3.1.3", + "version": "3.1.5", "description": "Decorators to sync class properties to Local/Session storage", "main": "./lib/index.js", "typings": "./lib/index.d.ts", "scripts": { "build": "tsc", - "test": "jest --verbose" + "test": "jest --verbose", + "watch": "npm run build && tsc --watch" }, "files": [ "lib" diff --git a/src/webstorage.ts b/src/webstorage.ts index 8ee2cd7..0c5d77a 100644 --- a/src/webstorage.ts +++ b/src/webstorage.ts @@ -59,12 +59,20 @@ export function SessionStorage(defaultValue?, opts: WebStorageOptions = {}) { * @param opts Any additional options */ function fromStorage(storage: Storage, opts: WebStorageOptions) { - let storedVal = JSON.parse(storage.getItem(opts.key)); - if(storedVal == null && opts.default == null) return null; - if(storedVal != null && opts.encryptWith != null) storedVal = JSON.parse(crypto.AES.decrypt(storedVal, opts.encryptWith).toString(crypto.enc.Utf8)); + let storedVal = storage.getItem(opts.key); + if(storedVal == null || storedVal == "" || storedVal == "undefined") { + if(opts.default == null) return null; + if(opts.default != 'object') return opts.default; + if(opts.default.constructor != null) return Object.assign(new opts.default.constructor(), opts.default); + let temp = Object.assign({}, opts.default); + Object.setPrototypeOf(temp, Object.getPrototypeOf(opts.default)); + return temp; + } + storedVal = JSON.parse(storedVal); + if(opts.encryptWith != null) storedVal = JSON.parse(crypto.AES.decrypt(storedVal, opts.encryptWith).toString(crypto.enc.Utf8)); + if(typeof storedVal != 'object' || !Array.isArray(storedVal)) return storedVal; if(opts.default != null && opts.default.constructor != null) return Object.assign(new opts.default.constructor(), opts.default, storedVal); - if(typeof storedVal == 'object' && !Array.isArray(storedVal)) return Object.assign({}, opts.default, storedVal); - return storedVal; + return Object.assign({}, opts.default, storedVal); } /** @@ -81,7 +89,7 @@ function decoratorBuilder(storage: Storage, opts: WebStorageOptions) { let field = fromStorage(storage, opts); Object.defineProperty(target, key, { get: function() { - if(field != fromStorage(storage, opts)) target[key] = field; + if(field != fromStorage(storage, {key: opts.key, encryptWith: opts.encryptWith})) target[key] = field; return field; }, set: function(value?) {