Preserve the current page status for future visits

Currently, I am in the process of creating a website that will complement a presentation. One of the requests I received is to customize the site content based on what is being presented, meaning certain elements may need to be hidden from the page. To address this, I have developed a simple script that can hide content and reset it upon refreshing the page.

However, now I am exploring the possibility of setting up the presentation in advance. The challenge here is that the setup could be done an hour or a day before the actual presentation, and there is a chance that the browser may be closed in the meantime.

Instead of implementing an advanced login system with saved profiles, I am wondering if there is a way for the site to remember the last displayed content on the screen and reload it in the same manner. This could possibly be achieved through caching or by associating it with a username, such as an email address.

For a demonstration of what I have so far, you can visit this link to the Fiddle page.

Below is the HTML code snippet:

Insert HTML code here...

Here is the jQuery code snippet:

Insert jQuery code here...

And finally, the CSS code snippet:

Insert CSS code here...

Answer №1

One approach is to create a well-structured JSON object that includes details on the content to be shown, its placement, and then store this object in the user's localStorage.

When the page loads, retrieve this object from localStorage and use the information within to dynamically adjust how the page is displayed based on the defined values.

Answer №2

Have you considered utilizing a query string within the URL?

For example:

?exclude[]=section1&exclude[]=section2

Then you can easily extract the data on document load using one of these methods: How to Retrieve Query String Values in JavaScript?

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

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

When the flexbox is nested in a container with a flex-direction of column, the scrolling

I'm facing a challenge in setting up a basic message container that can scroll when necessary. The issue arises when I place the message box within another container and add a side bar, causing the message box to exceed the parent container's hei ...

Using JQuery to Give the TinyMCE Editor Focus: A Step-by-Step Guide

My current challenge involves adding text to the TinyMCE editor using SELENIUM. I have successfully added text with the following code snippet: $('iframe').last().contents().find('body').text('401c484b-68e4-4bf2-a13d-2a564acddc04& ...

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

Exploring the utilization of attributes with slots in Vue.js

Can attributes be set on a slot so that the element from the parent inherits those attributes? Parent <vDropdown> <button slot="button">new button</button> <ul>content</ul> </vDropdown> Dropdown.vue <d ...

JQuery's .each method is executed prior to making an Ajax request

I am currently working on a JavaScript (jQuery) function that loops through input elements in a form, builds an array to convert into a JSON string, and then sends it to an AJAX endpoint. However, I am facing an issue where the loop runs after the AJAX cal ...

Obtain information from a database by leveraging the chosen Dropdown option through a combination of PHP and jQuery AJAX

I have updated my code below and I am receiving a "500 (Internal Server Error)" on my PHP code. Being new to PHP, jQuery, and Ajax, I have been struggling to find an example online that could help me solve my issue. Can someone kindly explain how I can di ...

Materialize.css | managing spaces, indentation, and 'overriding' in a span element

I recently started using a new framework called Materialize CSS for my project and I'm still getting the hang of it. One issue I've encountered is that long texts in my sidebar are creating large spaces between line breaks and strange indents. D ...

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

As I delve into a Next.js project, my goal is to use Tailwind CSS to craft an interface featuring a sidebar on the left, a header at the top, and a main content area. However, an issue has surfaced where users can over-scroll, leading to a blank space appe ...

One effective way to redirect after a PUT request and display a one-time message

Here's what I'm aiming for in terms of desired behaviour: A user navigates to a password change web page. The user completes the form and it is sent via PUT request to our REST server. Upon successful completion, the user is redirected to their ...

The nth-child selector is not functioning correctly with material-ui components

Trying to figure out how to give two paragraphs different background colors using nth-child. Here's the JSX: <div className={classes.paragraphs}> <p>Test 1</p> <p>Test 2</p> </div> And the CSS: const useSty ...

Are there specific elements that fall under the umbrella of CSS?

Code is causing some red boxes to appear unexpectedly. User agent: Chrome/80.0.3987.149 Linux x86_64 Here is the code snippet: <html lang="en"> <head> <meta charset="utf-8"> <title>Flow</title> ...

Determine the currently active view on a mobile device

I am trying to determine whether the user is viewing the website vertically or horizontally on their mobile device or iPad in order to adjust the image scale accordingly. For example: If the user is viewing the page horizontally, I want the image style t ...

Encountered a NetworkError: 500 Internal Server Error while attempting to request JSON on the hosting

Having an issue with my ASP.NET MVC app. The app uses the FullCalendar jQuery with events requested in a JSON array. The jQueryCalendar code is as follows: function renderCalendar() { $("#cal").fullCalendar({ header: { left: ' ...

I am looking for a way to create a fixed bottom navbar that evenly spreads out the links across the entire width of the screen. It should also be responsive

:) I'm experimenting with my fixed bottom navbar in bootstrap.. It's working to some extent.. But unfortunately, the links in my navbar won't justify.. I've tried everything I can think of.. I want it to be responsive so the current ...

How to display percentage value on ReactJS Material UI progress bar

For displaying the progress completed in numbers, I utilize the Linear Determinate component. Take a look at the image below to see how it appears. ...

"An error occurs when trying to trigger a .click() event within a list element

There is a list that can contain either plain text or a link. If there is a link present, the entire list element should be clickable. When attempting to execute the following code: if ($('.link').length) { $('li[data-contains-link]' ...

Flickering problems occur when using Jquery to load MVC Views upon hovering

I am trying to create a hover effect that expands and changes the content of each div when hovered over, and reverts back to its original state on mouseout. To achieve this, I am using MVC partial views: (Subpages.cshtml) <div id="subpages" c ...

Finishing the JQuery $.each() loop within a $.click function

$('#button').click(function() { $('.field').each(function() { if (condition) { return false; } }); alert("Even if 'return false;' is encountered in the loop, this alert will still be triggered"); } ...

The function inputLocalFont.addEventListener does not exist and cannot be executed

Help needed! I created a code to add images using PHP and JS, but I'm encountering an error in my JS that says: inputLocalFont.addEventListener is not a function Here's the code snippet: <div> <img src="<?php echo $img_path.& ...