Search⌘ K
Home
Courses
Building Real-Life Applications with Blazor WebAssembly

Adding JavaScript and Services to Write to LocalStorage

Explore how to build a local storage service in Blazor WebAssembly by writing JavaScript functions and creating C# interfaces and classes. Understand how to invoke JavaScript from Blazor to save data to the browser's localStorage, enabling persistent client-side storage.

We'll cover the following...

Writing JavaScript to access localStorage

We need to write the JavaScript functions that will read to and write from the browser’s localStorage. We do this as follows:

  1. Right-click the wwwroot folder and select the “Add, New Folder” option from the menu.
  2. Name the new folder scripts.
  3. Right-click the scripts folder and select the “Add, New Item” option from the menu.
  4. Enter “javascript” in the “Search” box.
  5. Select “JavaScript File.”
  6. Name the file bweInterop.js.
  7. Click the “Add” button.
  8. Enter the following JavaScript:
JavaScript (JSX)
var bweInterop = {};
bweInterop.setLocalStorage = function (key, data) {
   localStorage.setItem(key, data);
}
bweInterop.getLocalStorage = function (key) {
   return localStorage.getItem(key);
}
  1. Open the wwwroot\index.html file.
  2. Add the following reference within the body element:
HTML
<script src="scripts/bweInterop.js </script>
  1. Make sure to add it before the reference to _framework/blazor. webassembly.js.

Adding the

...