diff --git a/page/state.html b/page/state.html index 68cef17..eae5e17 100644 --- a/page/state.html +++ b/page/state.html @@ -89,3 +89,60 @@ // Final vaue of bar: bar 2 + +
+

Storage-backed states

+ +

+ The StorageState subclass of State implements the same API but is backed by a + Storage object. +

+ +

+ This comes with a series of limitations: +

+

+ +

+ By default, StorageState uses the + window.localStorage object, but you can change this by + passing the storage option in the constructor. +

+ +

+ When using the value short-hand to have a different + StorageState for every individual value, these would + all override the same key in the storage. To remedy this, the + key option can be used to redirect reads and writes + of the "value" key to a different key in the storage. +

+ + + const greeting = new StorageState({}, { + storage = sessionStorage, + key: 'greeting' + }) + + greeting.valueChanged = newValue => + console.log(`Greeting has changed: ${newValue}`) + + greeting.value = "Hello, World!" + + console.log(sessionStorage.value) // udnefined + console.log(sessionStorage.greeting) // "Hello, World!" + +
+ +
+

Map-backed Storage

+ +

+ When a fallback option is needed, for example to support clients without + localStorage without breaking the page, the + MapStorage object implements the Storage API + and is backed by a plain JavaScript Map object. +

+