[Deprecated]
It was unnecessarily heavy and restrictive to wrap this library up as an Angular module. Please use the unwrapped version, here: typed-storage.
New Usage
With Angular's dependency injection, the new usage looks like this:
;
TypedStorage
The Angular 2 & 4 TypedStorage module provides an easy way to store and retrieve nested view models from browser storage (either localStorage or sessionStorage).
What it is not
In some browsers, such as Internet Explorer, it cannot be a drop-in replacement for localStorage or sessionStorage when using property- or dictionary-style references (as opposed to .getItem()/.setItem). The specific Javascript feature we use for this is the Proxy class. See Mozilla's notes on browser support for the Proxy class), for more information.
Will work:
localStorage = 653;// browser refresh...;// someValue == "314"
Will also work:
typedStorage.setItem"mykey", 653;// browser refresh...;// someValue == "314"
Will only work in modern browsers:
typedStorage = 653;// browser refresh...;// someValue == undefined
Features
- It implements the Storage interface:
;s = sessionStorage;s = typedStorage;
- Allows optional namespacing in the underlying storage provider to avoid key collisions with other modules used by your application.
- Can use either string keys or instances of TypedStorageKey for better type safety.
Usage
// This presumes TypedStorage was configured with namespace com.example.myapp and localStorage:;;typedStorage.setItemmyKey, myInst;typedStorage = myInst; // property access will only work in modern browsers.// localStorage now contains key "com.example.myapp.myInst" with a JSON-serialized representation of myInst. // ... myInst = typedStorage.getItemmyKey;// ormyInst = typedStorage;typedStorage.removeItemmyKey;
View Models
We use SimpleMapper to recursively map deserialized objects back into their original view models. Nested models that you want mapped should use SimpleMapper's @mappable attribute.
Note: Each property must have a default value, otherwise SimpleMapper will not be able to detect the property at run-time. The Typescript,
Id: number;
(with no default value) compiles to return Javascript's undefined
at run-time. Not even the property key will exist in the
compiled Javascript.
Installation
Run npm install --save-dev angular-typed-storage
inside of an Angular 4 project.
Setup
Inside your application's app.module.ts file, make the following additions.
// ...; // ...; // optional, if using VM refs instead of name strings.
Options
The view models would all be exported via index.ts
"Barrels" (see Angular glossary):
;;// ...
And in your classes, import like this:
;
Build
Run npm run build
to build the project. The build artifacts will be stored in the dist/
directory.
Running unit tests
Run npm test
to execute the unit tests via Karma.
Code coverage
While running tests, code coverage will be available at ./coverage/chrome/html/index.html.
Documentation
Run 'npm run compodoc' to generate documentation. Then run 'npm run compodoc-serve' to see auto-generated documentation and documentation coverage on port 8080.
Further help
Feel free to post issues.