send storage values to javascriopt as objects rather than strings (#10)

Author: aesalazar

src/Blazor.Extensions.Storage.JS/src/BrowserStorage.ts

@@ -26,8 +26,8 @@ export class BrowserStorage implements IBrowserStorage {
     return null;
   };
 
-  public SetItem(storage: string, key: string, keyValue: string): void {
-    window[storage].setItem(key, keyValue);
+  public SetItem(storage: string, key: string, keyValue: any): void {
+    window[storage].setItem(key, JSON.stringify(keyValue));
   };
 
   public RemoveItem(storage: string, key: string): void {

src/Blazor.Extensions.Storage/LocalStorage.cs

@@ -30,7 +30,7 @@ public Task SetItem<TItem>(string key, TItem item)
         {
             if (string.IsNullOrWhiteSpace(key)) throw new ArgumentNullException(nameof(key));
 
-            return JSRuntime.Current.InvokeAsync<object>(MethodNames.SET_ITEM_METHOD, StorageTypeNames.LOCAL_STORAGE, key, Json.Serialize(item));
+            return JSRuntime.Current.InvokeAsync<object>(MethodNames.SET_ITEM_METHOD, StorageTypeNames.LOCAL_STORAGE, key, item);
         }
     }
 }

src/Blazor.Extensions.Storage/SessionStorage.cs

@@ -30,7 +30,7 @@ public Task SetItem<TItem>(string key, TItem item)
         {
             if (string.IsNullOrWhiteSpace(key)) throw new ArgumentNullException(nameof(key));
 
-            return JSRuntime.Current.InvokeAsync<object>(MethodNames.SET_ITEM_METHOD, StorageTypeNames.SESSION_STORAGE, key, Json.Serialize(item));
+            return JSRuntime.Current.InvokeAsync<TItem>(MethodNames.SET_ITEM_METHOD, StorageTypeNames.SESSION_STORAGE, key, item);
         }
     }
 }

test/Blazor.Extensions.Storage.Test/Interop/InteropStorage.cs

@@ -0,0 +1,37 @@
+using System.Threading.Tasks;
+using Microsoft.JSInterop;
+
+namespace Blazor.Extensions.Storage.Test.Interop
+{
+    /// <summary>
+    /// Interop calls to JavaScript Local and Session storage via Blazor's <see cref="JSRuntime"/>.
+    /// </summary>
+    public class InteropStorage
+    {
+        /// <summary>
+        /// Returns a session storage value.
+        /// </summary>
+        /// <param name="key">Key associated with stroed value.</param>
+        /// <returns>Task that returns the stored value as a string.</returns>
+        public async Task<string> GetSessionStorage(string key)
+        {
+            return await JSRuntime.Current.InvokeAsync<string>(
+                "getSessionStorage",
+                key
+            );
+        }
+
+        /// <summary>
+        /// Returns a local storage value.
+        /// </summary>
+        /// <param name="key">Key associated with stroed value.</param>
+        /// <returns>Task that returns the stored value as a string.</returns>
+        public async Task<string> GetLocalStorage(string key)
+        {
+            return await JSRuntime.Current.InvokeAsync<string>(
+                "getLocalStorage",
+                key
+            );
+        }
+    }
+}

test/Blazor.Extensions.Storage.Test/Pages/Index.cshtml

@@ -3,11 +3,12 @@
 @inject LocalStorage LocalStorage
 @inject HttpClient Http
 @inject ILogger<Index> logger
+@using Blazor.Extensions.Storage.Test.Interop
 
 <h1>Session and Local Storage Test, Open up your browser devtools to see the logs!</h1>
-
 @functions {
-    WeatherForecast[] forecasts;
+    private WeatherForecast[] forecasts;
+    private readonly InteropStorage interopStorage = new InteropStorage();
 
     protected override async Task OnInitAsync()
     {
@@ -17,6 +18,18 @@
         {
             await SessionStorage.SetItem<WeatherForecast[]>(key, forecasts);
             await LocalStorage.SetItem<WeatherForecast[]>(key, forecasts);
+
+            var fromIopSession = await interopStorage.GetSessionStorage(key);
+            var fromIopLocal = await interopStorage.GetLocalStorage(key);
+
+            var iopSessionHasQuotes = fromIopSession.StartsWith("\"") || fromIopSession.EndsWith("\"");
+            var iopLocalHasQuotes = fromIopLocal.StartsWith("\"") || fromIopLocal.EndsWith("\"");
+
+            logger.LogInformation($"Interop get from session storage contains extra quotes: {iopSessionHasQuotes}");
+            logger.LogInformation(fromIopSession);
+            logger.LogInformation($"Interop get from local storage contains extra quotes: {iopLocalHasQuotes}");
+            logger.LogInformation(fromIopLocal);
+
             var fromSession = await SessionStorage.GetItem<WeatherForecast[]>(key);
             var fromLocal = await LocalStorage.GetItem<WeatherForecast[]>(key);
 

test/Blazor.Extensions.Storage.Test/wwwroot/index.html

@@ -10,5 +10,16 @@
   <app>Loading...</app>
 
   <script src="_framework/blazor.webassembly.js"></script>
+  <script type="text/javascript">
+
+    function getLocalStorage(key) {
+      return localStorage.getItem(key);
+    }
+
+    function getSessionStorage(key) {
+      return sessionStorage.getItem(key);
+    }
+
+  </script>
 </body>
 </html>