add demos for binding storage to ui element

website/more_documentation/bindings_documentation.py

@@ -1,4 +1,4 @@
-from nicegui import ui
+from nicegui import app, ui
 
 from ..documentation_tools import text_demo
 
@@ -52,3 +52,16 @@ def more() -> None:
                 ui.date(on_change=lambda: ui.notify(f'Date: {date}')).bind_value(date_input)
             with date_input.add_slot('append'):
                 ui.icon('edit_calendar').on('click', menu.open).classes('cursor-pointer')
+
+    @text_demo('Bind to storage', '''
+        Bindings also work with [`app.storage`](/documentation/storage).
+        Here we are storing the value of a textarea between visits.
+        The note is also shared between all tabs of the same user.
+    ''')
+    def ui_state():
+        # @ui.page('/')
+        # def index():
+        #    ui.textarea('This note is kept between visits') \
+        #       .classes('w-full').bind_value(app.storage.user, 'note')
+        # END OF DEMO
+        ui.textarea('This note is kept between visits').classes('w-full').bind_value(app.storage.user, 'note')

website/more_documentation/storage_documentation.py

@@ -67,3 +67,16 @@ def more() -> None:
         # END OF DEMO
         counter[app.storage.browser['id']] += 1
         ui.label(f'{len(counter)} unique views ({sum(counter.values())} overall) since {start}')
+
+    @text_demo('Storing UI state', '''
+        Storage can also be used in combination with [`bindings`](/documentation/bindings).
+        Here we are storing the value of a textarea between visits.
+        The note is also shared between all tabs of the same user.
+    ''')
+    def ui_state():
+        # @ui.page('/')
+        # def index():
+        #    ui.textarea('This note is kept between visits') \
+        #       .classes('w-full').bind_value(app.storage.user, 'note')
+        # END OF DEMO
+        ui.textarea('This note is kept between visits').classes('w-full').bind_value(app.storage.user, 'note')