What is the best location for storing an individual user's UI configuration settings?

I recently built an ASP.NET MVC app using KnockoutJS, incorporating a data grid which allows for customizable visibility of columns, column sizes, and filter generation in JSON format. This grid also supports remote sorting, filtering, and ordering. Users are able to create their own presets for filters and settings. I am now questioning where this information should be stored. Currently, I have it stored in both cookies and MSSQL, but I've heard that this may not be best practice. How can I improve this storage method while still minimizing server requests?

javascriptasp.net-mvcknockout.js

Answer №1

If you're looking to store data locally, you have the option of using either local or session storage. For more information on this topic, check out this resource.

Here is an example of how localStorage can be utilized:

// Store 
localStorage.setItem("lastname", "Smith"); // Retrieve 
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

And here is a usage example for sessionStorage:

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When refreshed using AJAX, all dataTable pages merge into a single unified page

I followed the instructions on this page: How to update an HTML table content without refreshing the page? After implementing it, I encountered an issue where the Client-Side dataTable gets destroyed upon refreshing. When I say destroyed, all the data ...

javascriptphpjqueryhtmlajax

Determine the maximum value in the array using the Math.max method with

How exactly does Math.max.apply(null, arr); work? Let's take for example var arr = [45,25,4,65] ; Will it compare 'null' and '45' and return the maximum number between the two, like 45? After comparing, will it then compare t ...

javascriptarrays

Using React and Redux to update the state of an object with the current state

Upon mounting my component, I make a call to an API and upon success, the state is updated with the following data: { "brief":"No brief given", "tasks":[ { "_id":"5c74ffc257a059094cf8f3c2", " ...

javascriptreactjsreduxreact-redux

Is it possible to automatically click a link using jQuery?

Although this question has been asked countless times before with numerous answers, I am baffled as to why I am unable to autoclick a link upon page load! I have successfully used the same technique over 20 times in the past without encountering any issue ...

javascriptjquery

Enhancing server error troubleshooting with Next.js: improved stack trace visibility?

When a server error happens on Next.js, the call stack only provides information about the specific component where the error is located without offering any further guidance. For instance, in /pages/index.js, I have a component named Test. Within this co ...

javascriptreactjsnext.js

Nested solution object populated with promises

Looking for a solution similar to the npm libraries p-props and p-all, but with the added functionality of recursively resolving promises. const values = { a: () => Promise.resolve(1), b: [() => Promise.resolve(2)], c: { d: () =&g ...

javascriptobjectnpmrecursionpromise

Expanding and collapsing multiple tables in Material-UI

I'm currently working on creating a collapsible table using MaterialUI. At the moment, all my slides have collapses but they are connected to one state for "open", so when I open one slide, all the other slides also open. Here is an example sandbox t ...

javascriptreactjsmaterial-ui

Change the navbar brand in Bootstrap to be hidden on small screens like mobile devices

I am facing an issue with the navbar on my website where it expands in height when viewed on mobile devices due to not fitting into a single line. I have observed that if I remove the brand, it fits perfectly. However, I want to keep the brand visible on l ...

javascripthtmlcssbootstrap-4

Automatically populate form fields with data from the clicked row in the HTML table when using JSP

Attempting to populate form fields using jQuery or JavaScript with row elements selected by clicking on the row. Tried a solution from Stack Overflow that didn't work as expected. I'm new to this, so please bear with me. (http://jsbin.com/rotuni/ ...

javascriptjqueryjsp

Is it possible to caution users before refreshing the page, while still allowing them to

I have a script that displays a warning message to the user when they attempt to refresh the page. It works perfectly for that purpose. However, my issue is that this same alert pops up when a user clicks on a button or a link within the website itself. I ...

javascriptjquery

Binding multiple forms in backend ASP.NET MVC using Managed Extensibility Framework (MEF)

We are facing a challenge where we need to send multiple forms in one Ajax (jQuery) Call to an ASP application. The jQuery code we are using is as follows: var formContainer = { Form1 : form1.serialize(), Form2 : form2.serialize() } ...

javascriptjqueryajaxasp.net-mvcmodel-binding

Saving data to a database using knockout.js and JSON objects: A step-by-step guide

I have been assigned a task to work with knockout.js. In my project, I have a model called "employee" with fields such as name, country, and state. However, the issue I am facing is that I am unable to save any changes made during the editing process. Her ...

rubyjsonknockout.jsruby-on-rails-3.2

dynamic rendering in React based on the value passed through props

I am attempting to render a component using react.lazy, where the path is a variable in my props. However, I am encountering an error with webpack. The parent component sends the props like this: <DynamicModal url = 'Impuesto/formulario&apo ...

javascriptreactjs

Is there a way to prevent SignalR from disconnecting when the settings window is moved?

I am currently developing a webpage that utilizes SignalR events to trigger ajax requests to our servers. These requests return a URL with a custom URI scheme that, when accessed, opens up a specific program on the client's device without leaving the ...

javascriptajaxsignalr

What is the best way to create a clickable entity that is being dynamically generated in a networked A-Frame environment?

I'm attempting to use a networked A-frame to create a new entity upon page load. I want to incorporate various functionalities, such as hover and click events, on these entities. However, my attempts to make them clickable have been unsuccessful. f ...

javascriptthree.jsaframe

When you drag and drop multiple items, the entire data set is erased

I am currently working on a grid that loads data from a JSON file in a React application. When a user holds down the ctrl key on an item, that item is tagged with a new property called selected. My goal is to enable the user to drag and drop the tagged ite ...

javascriptreactjs

What is preventing me from utilizing global variables in distinct HTML and JavaScript files?

I am facing a perplexing issue with my HTML files, specifically index.html and lobby.html. Within main.js, which is loaded in index.html, I attempt to load lobby.html using window.location.href. Despite trying various methods to define global variables i ...

javascriptjqueryhtml

Activating JavaScript in the browser only when a button is manually clicked, not by default

As I work on my website, which is currently being constructed, I rely heavily on JavaScript. However, a concern of mine is the potential for failure if a user has JavaScript disabled on their client side system. I understand that it is not possible to pro ...

javascriptjquery

Is it possible to manually input data for a KendoScheduler DataSource through hard coding?

Currently, I am in the process of troubleshooting a KendoScheduler application, and my goal is to integrate some hard-coded data instead of relying on an ajax call. $("#scheduler").kendoScheduler({ dataSource: { transport: { ...

javascriptajaxkendo-uikendo-scheduler

Running a Node.js worker on an Amazon ECS-hosted server: A step-by-step guide

Our team is currently running a node server on Amazon ECS that receives up to 100 hits per second. Due to the single-threaded nature of JavaScript, we are hesitant to block the event loop. As a solution, we are looking to implement a worker that can peri ...

javascriptnode.jsamazon-web-servicesamazon-ec2npm