How To Use Browser Storage in Blazor Server (.NET 5+)

the browser session storage allows us to store data relevant to the current user and tab on the other side the local storage allows us to store data relevant to the user across multiple tabs in this video I will show you how to access the session and local storage in Blazer using C instead of JavaScript the best part about accessing the browser storage from a Blazer server application is that we don't need any external depend encies or additional nouet packages the keyword here is asp.net core protected browser storage there are two classes within the asp.net core framework that we can utilize to either access the local or the session storage from within our Blazer server applications the protected local storage class provides access to the local storage and the protected session storage class provides access to the session storage for Blazer web assembly the story is different asp.net core protected browser storage is a service side technology it can only be used for Blazer server because it requires asp.net core running on the server let me know if you want me to show you a solution for Blazer web assembly in a different video now that we know about the protected storage classes which are only available in Blazer server let's Implement a simple component this project is based on the default bler web app project template coming with net 8 let's first explore the code and then run the application to see it in action the home component contains a simple template that defines the text generate your lucky number followed by a button the button has a onclick Handler registered below the button we render the value of the lucky number property defined in the comp components code section in the code section we Define a lucky number property of type int and an instance of the random class to generate a new value the generate method is bound to The Click Handler of the generate button and uses the random object to create a new int value between 1 and 99 and assigns it to the lucky number property next we use the protected session store object to call the set async method we provide lucky number as the key and use the lucky number property to provide the value when we scroll to the top of the component we see a using statement to the microsoft. aspnet core. components. server. protected browser storage namespace from this namespace we inject an instance of the protected session storage class mentioned earlier in the video last but not least least we override the uninitialized async method in this method we read the data from the protected session store object by calling the get async method and providing the same key the method returns a value task therefore we check it for success and access the value using its value property this implementation allows us to generate a lucky number display it on the website and store it in the browser sessions storage we also have another page in the application called read only page this page has only a part of the implementation of the homepage it only reads data from the session store and displays it the goal of this page is to demonstrate that we can read data from the browser session store when navigating off the homepage now let's finally start the application to see it in action unfortunately the application frows an error right when we started there is an invalid operation exception stating that JavaScript interrupt calls cannot be issued at this time this is because the components being statically rendered when pre-rendering is enabled JavaScript interop calls can only be performed during the on after render async life cycle method the error informs us that we are trying to execute JavaScript when it is impossible when we want to access browser apis such as the session storage or the local storage we need to have a website rendered that can execute JavaScript on the client side however with the default Blazer web app project template based on net 8 pre-rendering is enabled by default pre-rendering is executed server side meaning the website hasn't been rendered on the client yet hence the error there are are two different ways to solve this issue you could handle it properly by using the on after render async life cycle method instead of the uninitialized async method however for this component implementation where we want to load data when we start the application it doesn't make sense to use pre-rendering therefore we want to disable pre-rendering for the entire Blazer application we open the app. rer file and insert a definition that turns off pre-rendering for the routes and the Head outlet components it will inherit this definition to the whole component tree let's start the application again as you can see now the application starts and we see the instructions to generate a lucky number I know you want to know what your lucky number is but first let's open the developer console and activate the application tab we want to observe the session storage as expected the store is currently empty now let's press the button a lucky number is generated and rendered on the website and in the developer tools we can see that the value is also stored in the session storage however while we see the lucky number key in clear text the value seems to be encrypted the reason is that the protected session storage and protected local storage classes are based on the asp.net core data protection implementation it's a whole different story but in short it means that the server encrypts the data and it's only readable to the server but not to the client this allows you to make sure that the data cannot be altered by the client when we press the button again we see that the value in the application session storage changes as well also when we navigate to the second page we still see see the value read from the application session storage on the screen of course behind the scenes bler utilizes the JavaScript interop to make the calls to the browser session storage or local storage but as bler developers we can keep writing CP code and we do not need to write JavaScript code to access those browser apis now that we saw how the application works with pre-rendering disabled I also wanted to show you a solution where I properly handle pre-rendering in place a server in the official documentation it is explained that moving the code accessing the protected browser storage from the uninitialized async method to the onaf render async method will allow me to do it however I set up my code according to the documentation and I couldn't make it work the on after render async method was never called this leaves me with the only working solution to disable pre-rendering for the components that access the browser storage apis however since we need interactivity on most of those components and Pages anyway I don't think that's a big deal after all it's one more instance where pre-rendering makes things a bit more complicated than they actually needed to be don't get me wrong I really think that pre-rendering is a great feature for Blazer applications that allows us to build static Pages such as company Pages or other informational type of websites however for the traditional single page web application implementing a dashboard or other applications I don't think pre-rendering is a great technology or feature that we should use on an everyday basis so what are the challenges and gas when working with the protected browser storage apis and use them in place a server accessing the browser storage is not possible during pre-rendering the reason is that the requested page doesn't exist in the browser during the pre-rendering phase therefore we cannot access a browser API at that point when working with protected storage apis turning off pre-rendering is the simplest solution otherwise we need to make sure the implementation fits the way bler works and we only access the application and storage after the first page render is completed another thing to keep in mind is that storing data on the client requires a round trip from the server to the client therefore storing data should be limited to a few kilobytes rather than megabytes otherwise you risk performance issues you can download the demo application from the GitHub repository using the link in the video description I also linked the project where I tried to make it work using pre-rendering I couldn't make it work but if you want to take a look and if you're able to make it work just let me know please also if you want me to record another video where I show you how to access the browser storage apis using Blazer web assembly please let me know down in the comments below and if you want to learn more about net development and bler in the future consider subscribing to the channel and I will see you in the next video

Channel: Claudio Bernasconi

Views: 743

Keywords: Browser Storage in Blazor Server, ASP.NET Core Protected Browser Storage, Session Storage, Local Storage, Session Storage in Blazor, Local Storage in Blazor, Blazor Browser Storage, Protected Browser Storage, CSharp, C#, .NET, .NET 8, dotnet 8, Claudio Bernasconi

Id: 315cATlLGLg

Length: 10min 31sec (631 seconds)

Published: Thu Mar 07 2024