What is the ideal amount of data to store in browser cache?

I am facing the challenge of loading thousands of user data records from a REST service, specifically user contacts in a contact-management system, and conducting a search on them. Unfortunately, the existing search functionality provided by the REST service does not meet my requirements, leaving me to manually load the data and perform searches myself. Due to the time-consuming nature of loading records, I aim to do it only once per user.

Server-side caching is not feasible as my client's apps operate across multiple servers without the ability to predict the server for each request. This leads me to consider caching the data on the browser side and conducting searches there instead. However, for users with extensive contact lists, this would involve storing megabytes of data as Javascript in browser memory. What potential challenges may arise from storing such large amounts of data in browser memory?

Answer №1

Having a large amount of Javascript data stored shouldn't present any issues. The real concern lies in memory leaks. Consider the vast amount of RAM that modern computers possess - a few megabytes is merely a drop in the ocean.

Answer №2

When developing for mobile devices, it's important to keep in mind the limitations of Mobile Safari and other mobile browsers when it comes to handling large amounts of JavaScript data. Desktops may not have as much trouble, but Mobile Safari can stop working at around 10Mb of data. To avoid this issue, consider returning only essential information for user searches and then loading more detailed records from the REST API on-demand.

An alternative approach is to proxy the REST Service and create a custom search functionality on a server that you manage. This can be done quite easily with tools like Python + Django + XML Models. However, if server-side caching is not an option, this may not be a feasible solution.

Answer №3

Easily handle a large number of records in your web browser. I have conducted tests on search and sorting performance using jOrder (http://github.com/danstocker/jorder) with datasets containing tens of thousands of entries without any issues.

Answer №4

When considering scalability, implementing a distributed server-side cache would be my recommendation. Storing data in the browser may require constantly increasing the browser cache lifetime as the system grows to manage traffic effectively.

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

React JSX is failing to return either an Icon or String value depending on the input provided by the user for the password

I'm currently developing a registration page where I want to display a message saying "Your password must be at least 12 characters long" or show a green checkmark when the user types a password that meets this requirement. However, nothing is being d ...

Python Selenium : Struggling to locate element using ID "principal"

As part of my daily work, I am currently working on developing a Python Script that can automate the process of filling out forms on various websites. However, I encountered an issue with Selenium while trying to interact with certain types of webforms. F ...

Vue's smooth scrolling in Nuxt.js was not defined due to an error with the Window

There seems to be an issue with adding vue smooth scroll to my nuxt.js project as I'm encountering the "window is not defined error". The steps I followed were: yarn add vue2-smooth-scroll Within the vue file, I included: import Vue from 'vue ...

Neglecting to Execute Success Function After Retrieving Data from PageMethods Using Multiple Parameters in C#

I attempted to trigger my OnSuccess function, but it did not execute on the server. This is my code: function Get_Data(option , text){ //returns 'data', 'data', --not call OnSuccess-- PageMethods.BindSeries(option,text,OnSuccess); ...

Using AngularJS Scope to Map an Array within a JSON Array

I'm attempting to extract the type and url values from the media2 object within this JSON array and assign them to an AngularJS scope Array. "results":[ { "session2":[ { "__type":"Object", "abou ...

AngularJS- numerous unique directives featured on a single page each with its distinctive state

Regarding the query about Calling a method in a directive controller from another controller. Is there a way to have multiple separate directives of the same type on a page? Since they share a common API (singleton), the state is also shared. Therefore, i ...

Creating a stunning HTML 5 panorama with GigaPixel resolution

Interested in creating a gigapixel panorama using HTML 5 and Javascript. I found inspiration from this example - Seeking advice on where to begin or any useful APIs to explore. Appreciate the help! ...

How can HTML text be highlighted even when it's behind a transparent div?

In my React application, I am facing an issue with a transparent div that serves as a dropzone for draggable elements. This div covers text and also contains children elements that may have their own text content. <Dropzone> <SomeChild> . ...

$http({method}) is malfunctioning while $http.get is functioning properly

Issue Description: While working on my project, I encountered an issue where using $http({ method : 'GET', url : data : ..... param works fine for both GET and POST requests. However, when the same method is used in JSFiddle, it blocks my reques ...

Express.js | Utilizing express.Router and handling route parameter inputs

I'm currently facing an issue with a small program I'm developing to practice Express.js. The problem lies in a separate router that is supposed to send a specific response based on the route. For example, when navigating to "/santiago", it shou ...

React | Utilizing ForwardedRefs with React Components

I'm currently working on a React project where I am creating a custom component that needs to be exported using forwardedRef. However, as I attempt to do this, an error keeps popping up: error This is the code snippet causing the issue: export inter ...

Creating a Mithril.js Single Page Application (SPA) using a JSON data source: A

I am currently working on creating a single page application (SPA) using Mithril.js. While I have come across some helpful tutorials like the one here and on the official Mithril homepage, I am struggling to combine the concepts from both sources effective ...

Iterating over the local storage to locate a specific item

Utilizing local storage extensively has been beneficial for maintaining state by storing the session on the client side. However, a challenge arises when updating the session. Within my code, there are multiple lists of objects that I serialize in JSON fo ...

Updating is not happening with ng-repeat trackBy in the case of one-time binding

In an attempt to reduce the number of watchers in my AngularJS application, I am using both "track by" in ngRepeat and one-time bindings. For instance: Here is an example of my view: <div ng-repeat="item in items track by trackingId(item)"> {{ : ...

Is it possible for me to reply to packets that are transmitted to a website?

I'm currently working on a Python program that sends a 'hello' packet to the server and I'm wondering if I can get the server to respond based on that. Here's the code snippet I'm using to send the packet: import requests hL = ...

What is the reason for setTimeout not functioning properly with an AJAX request?

I have a jQuery function that I'm trying to tweak: $(".milestone-in-tree").live({ mouseenter: function() { setTimeout( $.ajax({ type: "GET", url:"/projects/pmnodes/" + $(this).data("pmnode") + "/addbuttons. ...

Creating dynamic height based on width using JavaScript

I'm trying to make a rectangle responsive based on the width of the window. This is my current logic: aspectRatio = 16 / 9 win = { width: window.innerWidth, height: window.innerHeight, } get browser() { const width = this.win.width - 250 ...

The functionality for PHP photo upload preview is currently not compatible with images taken with a mobile camera

In my responsive web app, users can upload photos. Everything works perfectly on desktop, but on mobile devices, there's a peculiar issue. When attempting to upload a photo by using the camera option, the preview doesn't show up unless an alert i ...

What is the process for encrypting and decrypting image files over the internet?

I'm currently developing a web application that requires loading images into a canvas object, followed by extensive manipulation. My goal is to conceal the original source image file (a jpeg) in such a way that users on the client side cannot access i ...

Can external URLs be utilized in Firebase hosting for AJAX or HTTP requests?

I am curious to know if Firebase has the ability to use external URLs: defaultUrl: externalExampleUrl: $.ajax({ url: 'https://us-central1-ecc-local.cloudfunctions.net/getAjax', dataType: "json", type: 'POST', data: { ...