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

What are the best practices for utilizing the onLeave() function in fullpage.js?

My goal is to make the user scroll through 4 sections. Upon reaching the fourth section, if the user scrolls down again, instead of going to the fifth section, the view should loop back to the first section. (The fifth section only contains the imprint and ...

jqueryhtmlcssfullpage.js

The issue of the marker vanishing upon refreshing the page on AngularJS

Currently, I am encountering a rather peculiar issue. Upon the initial page load, the code snippet below correctly displays a marker at the specified coordinates and ensures the map is properly centered: <div class="paddingtop"> <map data-ng- ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3

Is there a way to configure my datepicker so that it displays only dates that are later than a specified date

At the heart of my inquiry lies a dilemma: I have two date pickers, one for leave_start and the other for leave_end. If an individual selects "YES" for a future text_field, I aim to ensure that the date pickers only display dates after the person's an ...

javascriptjqueryruby-on-railsrubyruby-on-rails-4

Can someone please clarify how the nth-of-type selector functions?

I can't understand why the nth-of-type selector needs to be set to 2 instead of 1 for the first sibling of this type in the code. To see the code in action, check out this jsfiddle: https://jsfiddle.net/xj5hvn16/ If anyone could kindly provide an ex ...

htmlcsscss-selectors

Retrieve information from a SQL database table and present the output in an HTML table format

I am trying to display the result of a query to a remote ODBC SQL database in an HTML table using PHP. I have successfully established the connection with the database, but when I attempt to execute a query and display it in a table, nothing appears. I am ...

phphtmlmysqlodbc

determining the user's position within the <s:select> element

I have a dropdown select tag in my code with a list of countries. I want the user's country to be auto-selected when they access the page. This is the JSP code snippet: <s:select name="dropdown" list="countries" listKey="value" listV ...

javascripthtmlgoogle-mapsgoogle-maps-api-3struts2

Is there a glitch in the Bootstrap v4 Navbar?

Encountering an issue with the default navbar example from Bootstrap's official website. The navbar is supposed to be full-sized and collapse when the screen size decreases. However, after implementing the code into my project, it appears as always co ...

jqueryhtmlcssbootstrap-4twitter-bootstrap-4

Applying various Angular filters to an array of objects within HTML select elements

I'm fairly new to working with JS and the rather challenging learning curve of AngularJS. I have an array containing numerous objects with the relevant properties listed below: $scope.myRecs = [{country: 'Ireland', city: 'Dublin&apos ...

javascriptarraysangularjsfilterionic-framework

Starting Array index value at 1 in React js: A step-by-step guide

Is there a way to make the index value start from 1 instead of 0? {props.useraccountListData.useraccountTypeList.map((item, index) => ( {index} ))} The current output is starting from 0, 1, 2. However, I would like it to start from 1, 2, 3... ...

javascriptreactjsjsx

Having Trouble with Gulp and AutoPrefixer Integration

I have integrated Gulp into my project and am looking to utilize the autoprefixer feature. Here is a glimpse of my current gulp file: // Including gulp var gulp = require('gulp'); // Including necessary plugins var concat = require('gulp-c ...

cssnpmsassgulp

The function called Nuxt: n2 is not defined

When using Nuxt 3, I encountered a TypeError that looks like the following: Uncaught TypeError: n2 is not a function My issue revolves around a button that triggers the function toggleSelectRow with a @click.prevent directive. The function in question is ...

javascriptvue.jsnuxt.js

Transfer the data stored in the ts variable to a JavaScript file

Is it possible to utilize the content of a ts variable in a js file? I find myself at a loss realizing I am unsure of how to achieve this. Please provide any simple implementation suggestions if available. In my ts file, there is a printedOption that I w ...

javascriptangulartypescript

Ways to conceal a personalized context menu for right-click operations

I came across a helpful page (How to add a custom right-click menu to a webpage?) discussing "How to add a custom right-click menu to a webpage" The source does not provide any functionality to hide the menu. Any suggestions on how I can hide the menu? ...

jqueryhtmlcsstwitter-bootstrap-3

The mobile display does not support scrolling in Material-UI Drawer

I recently implemented the React Material UI library and integrated the Drawer component as a side-bar menu in my project. However, I encountered an issue where the Drawer component does not support scrolling on mobile devices. You can check out the websi ...

cssreactjsmaterial-designmaterial-ui

H3 Tag Embraced by a Repetitive Image

As I'm developing a website, I've encountered an interesting challenge... I have an h3 tag that requires a repeating background on both sides. It's a bit difficult to describe, so I created this graphic to illustrate... Essentially, it&apo ...

htmlcss

What is the process for adding information to datatables using jQuery?

I have been struggling to make a data table in jQuery function correctly. I am able to append data to the table, but the sorting, pagination, and search features are not working. Even though the data is visible in the table, it shows as 0 records. I am wor ...

javascriptjqueryhtmldatatables

The onClick event handler is executed during every rendering process

Initially, my default state is set as follows: this.state = { selectedTab : 'tab1' } When it comes to rendering, this is how I define it: render(){ const { selectedTab } = this.state; return( <li>tab1</li><li>ta ...

javascriptreactjs

What is the best method for retrieving environment variables within a React JS web application?

Within my render method, I am trying to access a specific environment variable. However, because it is a custom ENV variable, I cannot utilize (process.env.NODE_ENV). According to this source, React filters all process.env access. What would be the best w ...

javascriptnode.jsreactjswebenvironment-variables

Formatting text over an image

The challenge I am facing involves having an image and text on it in two separate divs with a background color. The length of the text in one div is long while the text in the second div is short, but I want to ensure that the width of both divs are equal. ...

htmlcss

When using Observables in AngularFire2, the $ref property does not get captured

Recently, I started working with AngularFire2 (version 4.0.0-rc.1) and encountered a challenge that has me stuck: getWishlist$(): FirebaseListObservable<{}> { return <FirebaseListObservable<{}>>this.store.select(getFirebaseUID) ...

javascriptangularfirebase-realtime-databaserxjsangularfire2