> For the complete documentation index, see [llms.txt](https://docs.oneweb.tech/oneweb/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.oneweb.tech/oneweb/design-and-develop-oneweb-apps/design-and-develop-ux-ui/ux-ui-components/pages/page-features/local-storage-in-page.md). # Local Storage in Page Used in offline storage mode in mobile apps. Page Designer has a built-in feature that allows for the creation of a **local database**. This database is specific to the mobile device where the application is being used. The designer has the ability to design tables, manage columns and data within Page Designer while creating the mobile application. This feature is particularly useful for offline storage of data, particularly in areas with poor network connectivity or no network access. Additionally, there is an option for local storage to synchronize with the server database once the network connection is restored. **Steps to create local database in mobile application** \ Click on Database ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F0JnM1ZNmqxdzdm16AcDk%2Fimage.png?alt=media\&token=8e64584c-4957-4468-bbe0-79672a0aa1e0) icon then click Plus icon to create table ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FGXH29jjK4nMtiQ8YJbNs%2Fimage.png?alt=media\&token=66e1e131-c062-43b2-97cd-f4af045fb785) Enter collection name and select collection space. Click **Start Design**. For sync data please refer to [Sync Service in Page](/oneweb/design-and-develop-oneweb-apps/design-and-develop-ux-ui/ux-ui-components/pages/page-features/sync-service-in-page.md) ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FqXd5ge6RT3QKVsCwTaEJ%2Fimage.png?alt=media\&token=d3b1b1be-1eeb-49a8-9998-aa36ec9bd54e) Add columns to the table and enter data ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fq1OTlyZwVWsXKkOCk2pz%2Fimage.png?alt=media\&token=7c319f9a-2927-4513-a722-17d8a5ebbe2e) Click **Save** and the table will be shown on the left side under Database. ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FH1CMuhLlpA4iBRBWKavJ%2Fimage.png?alt=media\&token=e59e7a64-88ad-400a-b383-7abfe7a6b708) Click on the Export DDL icon to export DDL and create a sync table on the server database. (If the user chooses to sync database with server) ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F9OZb0NtJCwMCjzKhfCu2%2Fimage.png?alt=media\&token=2e19ba01-1f83-4cbc-bb41-139a70b0e508) **How to use this local table to display data on screen** \ Below are the steps to display data from local storage on the screen \ Users can use the Add Action feature on the Page to read from the local database. Add an action on the load event of Page Content ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F9uftHiubnPyLLisIwAUA%2Fimage.png?alt=media\&token=6dced713-7345-4672-8af3-94389208dd9d) Map the Card element on the page to the table read from the database using connect to DB icon. ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FqvtObwbwd1AyUHWh1MVi%2Fimage.png?alt=media\&token=ffd51c75-c525-4cfa-9870-4b535bbb5de0) Map the child fields within the card to the data fields in the table. Add button to sync data with server DB, if the sync option is enabled. ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FPlSoNBghLPLz7jU184Gv%2Fimage.png?alt=media\&token=0102b269-7846-4e91-ade9-0af390539c53) Add JavaScript to sync table ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FulI4SpeK78Pc7R6puYti%2Fimage.png?alt=media\&token=91249e60-e6f1-447d-a886-89b2abcd1d02) When you build the app and run it, it will display the data from the local DB as shown below: ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FNatsc3nLlcfUSXPtt2t9%2Fimage.png?alt=media\&token=6d06d319-a3cf-4f99-a393-bffed08bf42b) On-click of the Sync button, the system will display more data from the server as the server has more data. ![](https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FeygOAi2aq97vpFlA0Snb%2Fimage.png?alt=media\&token=f1cb23f1-1ad3-45b2-a20d-6e6ffbb38d62) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.oneweb.tech/oneweb/design-and-develop-oneweb-apps/design-and-develop-ux-ui/ux-ui-components/pages/page-features/local-storage-in-page.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.