Guide: Sharing Data Between Pages Using onclick Event in JavaScript

Question

Guide: Sharing Data Between Pages Using onclick Event in JavaScript

1Page.js

function TableRow() {
        let cells = document.querySelectorAll('#recieve-info td');
        cells.forEach(cell => cell.onclick = function () {
            let prevcell = cell.previousElementSibling;
            if (prevcell) {
    
                let LSItems;
                let AddValue = '/images/back_arrow.png.png'
    
                if (localStorage.getItem('passvalue') === null) {
                    LSItems = [];
                } else {
                    LSItems = JSON.parse(localStorage.getItem('passvalue'));
                }
                
                LSItems.push([AddValue]);
                localStorage.setItem('passvalue', JSON.stringify(LSItems));
                let prev = prevcell.innerHTML;
                console.log(prev);
            }
        });
    }

I am hoping to transfer values with an onclick event. For example, clicking on 'Save1' should save the value only in that particular cell.

https://i.sstatic.net/qm270.png

2Page.js

function ParaG() {
  document.querySelector('.Second-Para').innerHTML = JSON.parse(localStorage.getItem('passvalue'));
}

In this section, I aim to retrieve the saved values.

https://i.sstatic.net/wtHwX.png

javascript

Answer 1

Answer №1

You have the option to utilize cookies.

To store a particular cookie value:

document.cookie = "option=Option1";

To retrieve the stored cookie value:

function fetchCookie(cookieName) {
  var key = cookieName + "=";
  var decodedCookieStr = decodeURIComponent(document.cookie);
  var cookiesArr = decodedCookieStr.split(';');
  for(var i = 0; i < cookiesArr.length; i++) {
    var currCookie = cookiesArr[i];
    while (currCookie.charAt(0) == ' ') {
      currCookie = currCookie.substring(1);
    }
    if (currCookie.indexOf(key) == 0) {
      return currCookie.substring(key.length, currCookie.length);
    }
  }
  return "";
}
console.log(fetchCookie("option"))

Additional information on managing cookies can be found at:

Answer 2

You have the option to utilize cookies.

To store a particular cookie value:

document.cookie = "option=Option1";

To retrieve the stored cookie value:

function fetchCookie(cookieName) {
  var key = cookieName + "=";
  var decodedCookieStr = decodeURIComponent(document.cookie);
  var cookiesArr = decodedCookieStr.split(';');
  for(var i = 0; i < cookiesArr.length; i++) {
    var currCookie = cookiesArr[i];
    while (currCookie.charAt(0) == ' ') {
      currCookie = currCookie.substring(1);
    }
    if (currCookie.indexOf(key) == 0) {
      return currCookie.substring(key.length, currCookie.length);
    }
  }
  return "";
}
console.log(fetchCookie("option"))

Additional information on managing cookies can be found at:

Guide: Sharing Data Between Pages Using onclick Event in JavaScript

Answer №1

Similar questions

Using jQuery checkboxes with ajax for data submission and storage in PHP without the need for insertion

Adding a trailing slash to the URL in an Express server causes it to be appended

I am encountering an issue where the useState hook is returning an undefined value on separate components, even after

What is the process for including a scope in an Angular.js HTTP controller?

Chrome Devtool reported an error, but the majority of them are in a null file

Javascript problem: Understanding the .children method and how to use it

What is the reason behind NumberFormat only recognizing four numbers?

Searching for a method to execute actions prior to the "enter" event in ng-animate, similar to the beforeAddClass function

Using Bootstrap to handle opening a link when a dropdown menu button is clicked

Success with inserting data into MySQL, however the database table remains empty

Testing AngularJS components using mocking the document object

What are the best techniques for implementing opacity in styled components within react-native?

Sending information from ngRoute resolve to the controller

Synchronize information between mongoDB and firebase bidirectionally

Is there a way to incorporate vue samples into an independent HTML document?

Encountering a JSLint error while attempting to import the 'aws-amplify' package in my main file

What is the method for extracting URI value in JavaScript?

The JDBC driver is giving inaccurate results when querying MySQL

I am experiencing an issue with environment variables not appearing in my Context component on Next.js. Should I adjust the Next.js configuration or set up the Context to properly utilize the variables?

Retrieve information from the database without the need to refresh the page