problem with saving session data

I am attempting to access data from another page using session storage.

On my initial page, named home.html

function go_to_faq(qnum){

window.open('FAQ.html', '_blank');

sessionStorage.setItem('key2', qnum);

}
<a style="cursor: pointer;" onclick="go_to_faq('1')" target="_blank"> Open First Question </a>
<a style="cursor: pointer;" onclick="go_to_faq('2')" target="_blank"> Open Last Question</a>

On the second page FAQ.html

var qpara2 = sessionStorage.getItem('key2');

alert(qpara2);

First concern:

When I click the first link (Open First Question), it returns null on the initial click. The correct value (1) appears on the second click.

If I click the second link (Open Last Question), it displays the previous value (1) initially. Only after clicking again does it update to the correct value (2). It seems to have issues functioning correctly from the first click.

Second concern:

This functionality doesn't seem to work properly in Internet Explorer.

javascripthtmlcsssession-storage

Answer №1

In cases where Internet Explorer isn't functioning properly, consider opting for alternative browsers such as Firefox, Google Chrome, or Microsoft Edge. Personally, I suggest giving Firefox a try.

Answer №2

To implement your changes, make sure to first open a new page using window.open!

Answer №3

The initial problem has been resolved by simply reloading the page after saving the data

function navigate_to_FAQ(questionNumber){

sessionStorage.setItem('FAQ_Key', questionNumber);

window.open('FAQ.html', '_blank');

}

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

Ensuring Input Integrity: Utilizing HTML and Javascript to Block Unfilled Form Submissions

Currently, I am working on developing a registration page using HTML and JavaScript. Although I have added the 'required' tag in HTML to prevent users from submitting empty input fields, I noticed that users can bypass this restriction by simply ...

javascripthtml

Using Knockoutjs to fetch and display server-side data within the MVC framework

My goal is to initialize my knockoutjs viewmodel with data from the server. In my ASP.Net MVC project, I achieve this by passing a mvc viewmodel to the view: public ActionResult Edit(int cvId) { CV cv = repository.FindCV(cvId); //auto mapper mapp ...

javascriptc#jsonasp.net-mvcknockout.js

Tips for ensuring an element stays anchored at the bottom even when the keyboard is displayed

I recently encountered a situation on one of my pages where an element positioned at the bottom using absolute positioning was causing issues when the keyboard was opened, as it would move to the middle of the page unexpectedly. While this may seem like a ...

javascripthtmlcssreactjs

Render and download the file concurrently while displaying the view in Express

I'm looking to accomplish a task in Express where I can render a file and download it simultaneously. My current code looks like this: res.attachment('filename.csv'); res.render('pages/result', { data }); However, with this setu ...

javascriptnode.jsexpressejs

Attempting to contain the dimensions of the image within the confines of the card results in failure

Currently, I am designing custom cards featuring an image in the form of a water droplet... However, I am encountering difficulties in maintaining the proper drop shape across varying screen resolutions. Any guidance on this issue would be greatly valued. ...

cssreactjsmaterial-ui

Storing HTML elements in a database using jQuery's html() method

I have encountered a dilemma that has left me stumped after extensive online research. I have a dynamically generated webpage and need to save the entire appended body of the page to a database using PHP and MySQL. My current approach involves using the fo ...

javascriptphpjqueryhtmlmysql

Develop a descriptive box for a radio button form using jQuery

I am working on creating a form with simple yes/no questions. If the answer is no, no explanation is needed. However, if the answer is yes, I want to insert a new table row and display a textarea for an explanation. To ensure data validation, I am utilizi ...

javascriptjqueryerror-handlingradio-button

Troubleshooting: ReactJS CSS Class Issue

I'm fairly new to working with ReactJS and I've encountered an issue while trying to create a class for a specific form. Below is the code I've written: import React, { Component, PropTypes } from 'react'; import s from './s ...

javascripthtmlcssreactjs

The <mat-radio-button> component does not have a value accessor specified

When working with HTML and Angular, I encountered the following issue: <mat-radio-group> <mat-radio-button [(ngModel)]="searchType"> And (Narrower search) </mat-radio-button> <mat-radio-button [(ngModel)]="searchType"&g ...

javascripthtmlangularangular-material2

Determining the distance between two points in miles using Next.js

Are you familiar with the concept of geographical coordinates? Take for example these two points: point1 = {lat: 40.6974034, lng: -74.1197636} point2 = {lat: 42.694034, lng: -75.117636} My goal is to find the distance between these two poi ...

javascriptnext.jsdistance

What is the method to create all possible combinations from the keys of a JSON object?

How can I generate object B that includes all combinations of object A using a key-value pair? { "x": "data-x", "y": "data-y", "z": "data-z" } The desired output should look like this: { ...

javascriptjson

"Having trouble implementing sorting functionality on a click event in a React application with Material-UI table

Default behavior displays data in ascending order. Clicking on the table header should toggle between descending and ascending orders. Load Data in ascending order -> On click, change to descending order -> Again on click, change to ascending -> loop cont ...

javascriptreactjsmaterial-ui

Can Django implement pagination without altering the URL structure?

I discovered the fundamentals of pagination in Django at this resource: Nevertheless, I am faced with a challenge - I wish to implement pagination without modifying the URL. Specifically, I need to paginate a single table among multiple tables on an HTML ...

pythonhtmldjangohtml-tablepagination

What is the best way to incorporate variables into the useState hook in React?

I want to create multiple useState hooks based on the length of the userInputs array. The naming convention should be userInput0, userInput1, userInput2,...userInputN. However, using "const [userInput+index.toString(), setUserInput] = useState('' ...

javascriptreactjsnext.js

Tips for highlighting a Material UI Button when pressing the Enter key

Once the user has completed the final input, they need to press the save button The 'Tab' key typically moves the focus to the next element (in this case a button), but I want to use the 'Enter' key for this action. Can anyone advise o ...

htmlnode.jsreactjsmaterial-ui

Implementing form validations using JavaScript for a form that is created dynamically

I have dynamically created a form using javascript and now I need to add mandatory validations on the form. The validations should trigger when the dynamically created button is clicked. However, I am facing an issue where I receive an error whenever I t ...

javascript

What benefits does React offer that jQuery does not already provide?

What sets ReactJS apart from jQuery? If jQuery can already handle everything, why should we use React? I've tried to research on Google but still don't have a clear answer. Most explanations focus on terms like "views," "components," and "state" ...

javascripthtmlcssreactjsdom

What's the reason behind jQuery's position() and offset() methods returning decimal numbers in Chrome browsers?

In my HTML document, I have a simple div tag that is absolutely positioned. In Chrome, when I set the CSS rule "right" to a fixed value in pixels and "left" to "auto", then use jQuery's position() method to determine its left position immediately afte ...

jquerycssgoogle-chrome

Tips for sending data to Jade templates:1. Use the `locals`

Review the code below user.js exports.index = function (req, res){ res.render('user', { id: req.params.id }); }; user.jade body - var x = #{id} div.container div.headpic if (x < 10) ...

javascriptnode.jsexpresspug

Each time Firebase retrieves an object, it comes back with a unique name

One query has been bothering me: const questionsRef = firebase .database() .ref('Works') .orderByChild('firebaseKey') .equalTo(this.props.match.params.id); It's functional, but the issue lies in the output: "-LDvDwsIrf_SCwSinpMa ...

javascriptreactjsfirebase