Tips for retaining indexedDB and cached files upon closing the browser

Exploring the world of PWA for the first time! I have a project to create a PWA that functions seamlessly in both offline and online modes. Currently, I am storing my data in indexedDB to facilitate offline usage. However, I noticed that when I close the browser, the data stored in indexedDB gets erased. Is there a way to prevent this from happening? Additionally, all cached files are also deleted upon closing the browser. Is there a workaround for preserving these files as well? I prefer not to use localStorage due to the need for storing blobs in offline mode.

Appreciate any advice!

Answer №1

Like others have mentioned, it's important to consider that any data you store may not always be available. In fact, the user could even uninstall the browser where your PWA is installed.

  • If you require permanent data retention for a user, implementing a login system and utilizing server-side storage is necessary.

With that being said:

  • For small amounts of data (a few kB), I've had success using Local Storage, which hasn't been purged in my experience.
  • For larger data sets (>100MB), I rely on IndexedDB, although I do encounter purges from time to time. (Users can then reload the data from their file system, which is acceptable)

This has been consistent across various modern browsers and operating systems I've encountered.

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

In Angular 5, when you reset a required form control in a reactive form, the required error message beneath the input field is not cleared

Within my template, there is a form that becomes visible when a button is clicked- <form [formGroup]="person" (ngSubmit)="onSubmitNewPerson()" #formDirective="ngForm"> <mat-form-field> < ...

Material UI button text not receiving props

Within my application, I have a situation where I utilize data attributes on buttons to gather specific contextual information in the modal that is triggered by clicking the button. This functionality depends on accessing the data attributes through e.targ ...

swap out a single amchart for a different one

Here's the current amchart I have: https://i.sstatic.net/J8QLl.png I'm looking to create another amchart with the same data. Essentially, I want to replace the existing graph. You can find the new chart here -> This is my Angular code: pre ...

Determining the height covered by content when the container height is set

Is there a method in JavaScript to calculate the height of content in order to adjust the container's height accordingly? For instance, if I have a div with a height of 200px but the content inside only takes up 40px of that space. How can I determin ...

cannon.js detecting collisions without any physical contact occurring

I'm currently working on a basic car game using cannon.js and I've hit a roadblock. The Goal: My objective is to detect collision between the car and another object (such as a sphere) without applying any physical forces to either object. For ...

The quickest method to modify the anchor element's class depending on the query string

Requirement - I aim to accomplish this task using only pure JavaScript without any additional libraries, although I am open to using one if necessary. I need to assign an extra class to anchor elements that contain a query string of 'xyz=negate' ...

Repetition of UTM Parameters

I created a web page with a donation form embedded in it. Donors visiting the page come through a link that includes a source code at the end. I managed to include this source code in the URL of the embedded form using the following code: $(document).ready ...

Utilizing Promise.all() for handling multiple promises with multiple arguments

Currently, I am dynamically constructing a list of entries utilizing data retrieved from the server. Each entry is associated with a parent. My objective is to extract the parent's name from the DOM by locating its ID. This process works effectively ...

Identifying stylized text in contenteditable while navigating with arrow keys

Hello there! I am looking for a way to identify the text format within my editable div using arrow keys and automatically highlight the corresponding formatting buttons. For instance, if my cursor is on the phrase "This is me" and it is bold, strikethroug ...

Synchronize worker threads in Node.js

My exploration of "worker threads" in Node.js has led me to some interesting findings. I noticed that when setting a condition like i<100000000 in app.js loop, the second thread does not start until the first one finishes. How exactly do synchronous thr ...

Creating a glowing shimmer using vanilla JavaScript

After successfully creating the Shimmer Loading Effect in my code, I encountered a hurdle when trying to implement it. The effect is visible during the initial render, but I struggle with utilizing it effectively. The text content from my HTML file does no ...

Tips for enhancing the clarity of elements in KineticJS

I'm new to using Kinetic JS, and while I think it's a great library, I'm having trouble with the resolution of the elements. I know that Kinetic JS doesn't use SVG, but the resolution is not up to par. I'm creating circles and othe ...

When an option is chosen from the dropdown menu in react-select

Recently, I encountered an issue while working with the react-select dropdown in my project. After selecting an option from the dropdown, I noticed that all the option backgrounds turned blue. Upon inspection, I found that all options had the class name "r ...

Tips for distinguishing individual submit buttons within a foreach loop

Here is my code snippet: <?php require_once 'core/init.php'; if($result = $db->query ("SELECT * from countries")) { if($count = $result->num_rows) { $rows = $result->fetch_all(MYSQLI_ASSOC); } ...

Is it possible for the binding model of Mat-Checkbox to be optional or null?

Greetings everyone! I am a newcomer to the world of Angular, where I have successfully created a dynamic list of checkboxes. However, I have encountered a challenge when trying to bind selected values from an API to these checkboxes. <div *ngFor="let b ...

Extracting the name of a track from the /r/listenToThis subreddit for an IFTTT automation script

I have a list of songs gathered from this subreddit, presented in the following format: [ "Lophelia -- MYTCH [Acoustic Prog-Rock/Jazz] (2019)", "Julia Jacklin - Pressure to Party [Rock] (2019)", "The Homeless Gospel Choir - I'm Going Home [Folk ...

When using JQuery's $.get method and PHP to handle a request with a single quote, the response may contain

I am transmitting data from a client using JavaScript and the jQuery library to a server running on PHP. The data being sent is as follows: From Chrome Dev Tool -> Network Request URL:http://host:8888/RoviImages.php?id=880&aid=334&albumTitle=T ...

Ways to dynamically combine a group of objects

I'm grappling with a challenge involving an array containing two objects. After using Promise All to fetch both of these objects, I've hit a roadblock in trying to merge them dynamically. Despite experimenting with various array methods like map, ...

rectangle/positionOffset/position().top/any type of element returning a position value of 0 within the container

While the height/position of the container is accurately displayed, attempting to retrieve the top position (or any position) of containing elements yields a return value of 0. Additionally, using .getBoundingClientRect() results in all values (top, left, ...

Guide on parsing and totaling a string of numbers separated by commas

I am facing an issue with reading data from a JSON file. Here is the code snippet from my controller: myApp.controller("abcdctrl", ['$scope', 'orderByFilter', '$http', function ($scope, orderBy, $http) { console.log('abc ...