![]() ![]() ![]() When we refresh the page, the counter should reflect the value in the sessionStorage Conclusion To test this out, we can go into the developer settings and manually add key-value pair to sessionStorage We now have a way to restore data from sessionStorage or localStorage into our LiveView! In order to actually call the restore hook we need to add a unique ID to the element and attach our hook to it: NOTE: All hooks need to be defined above the following line let liveSocket = new LiveSocket("/live", Socket,, socket) do Git clone the complete solution check out the complete branch. The main branch will only contain the minimal amount of setup without implementing any hooks: ![]() Let’s clone the demo Phoenix LiveView app. Both storages use the same function getItem(key) where we provide a key which hopefully has the values we are looking for.įor more information regarding sessionStorage and localStorage see the Mozilla Docs Cloning the Demo Project If you wanted to persist the data, localStorage is what you are looking for. In this post we will be using sessionStorage as the data is wiped when we close the tab. These hooks allow for interoperability with JavaScript and grant us the ability to interact with a liveview during its lifecycle.įor storing the data, we will call a JavaScript hook inside a liveview function to store the value of a counter.įor fetching the data, we will be using the reconnected hook to fetch data from localStorage or sessionStorage. Sometimes we want to fetch or store data in localStorage or sessionStorage, we can fetch/store this data using LiveView hooks. Phoenix Liveview using LocalStorage or SessionStorage ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |