storage_size.js Module in WebForms Core

WebForms Core is a modern technology developed by Elanat in 2024, enabling server-side code to communicate with the client-side WebFormsJS library. This two-way communication allows the server to control HTML elements and execute client-side operations without needing extensive frontend code. The server sends compact commands to the client, which are then executed by WebFormsJS in the browser. The client can also return the result of client-side operations back to the server.

WebForms Core supports JavaScript modules, allowing server-side code to dynamically load a module, call its exported methods, and retrieve the return values. This article demonstrates the usage of the storage_size.js module with WebForms Core. To use WebForms Core, two steps are required: on the client side, include the WebFormsJS library by adding the following script tag to the page:

<script type="module" src="/script/web-forms.js"></script>

On the server side, import the WebForms class using the appropriate code behind framework. In this example, C# with CodeBehind is used. To load a JavaScript module on the client, use the following command:

form.LoadModule("/script/module/storage_size.js", [ "sz_GetStorageSize" ]);

This command loads the storage_size.js module and exposes the sz_GetStorageSize method for server-side invocation. The server can then call the method using:

Fetch.ModuleMethod(...)

The storage_size.js module provides a simple interface for obtaining the size of various browser storage mechanisms. The module exposes the sz_GetStorageSize(type, unit) method. The first parameter specifies the storage type, which can be cache, cookie, indexeddb, localstorage, sessionstorage, or origin. The second parameter specifies the output unit, such as B (bytes), KB (kilobytes), MB (megabytes), GB (gigabytes), or TB (terabytes).

If no unit is specified, the result is returned in bytes. For example, sz_GetStorageSize(cache) returns the size of cache storage in bytes, while sz_GetStorageSize(origin, MB) returns the size of origin storage in megabytes. The module supports various storage types, including cache, cookie, indexeddb, localstorage, sessionstorage, and origin.

The example project structure includes WebForms.cs, Controller.cs, and wwwroot folders, as well as page.aspx, layout.aspx, and script directories containing web-forms.js and module/storage_size.js files. When the user clicks a button on the page, a request is sent to the server, which executes the server-side operation using the storage_size.js module.

The controller sets various values in different storage mechanisms, loads the storage_size.js module, and then uses the sz_GetStorageSize method to retrieve the size of each storage type. The results are displayed on the page as messages.