Update the item's location and retrieve the latitude

Question

Update the item's location and retrieve the latitude

On the previous page, I used setitem(coordinates) to store latitude and longitude information. Now on the next page, I want to use getItem() to retrieve only the latitude, but I'm having trouble getting it.

First page

function storeCoordinates(location) {     
  const coordinates = {   
    lat: location.lat(), 
    lng: location.lng()       
  };            
  localStorage.setItem('coordinates', JSON.stringify(coordinates));    
}

window.onload = function () {
  var lat = localStorage.getItem('coordinates.lat');
  var IR = (-75 * lat) + 5025;
  var energie_pro = IR * 0.926 * 0.8 * 0.213 * 1.92 * 8;
  document.getElementById('eco_3000').innerText = energie_pro;
}

javascript html css

Answer 1

Answer №1

The mistake in the script is located on the following line:

let latitude = localStorage.getItem('coordinates.lat');

You are only able to retrieve local storage values with the exact key used when setting them, in this situation 'coordinates'. A more refined version of the script would be:

let coordinates = localStorage.getItem('coordinates');
const latitude = JSON.parse(coordinates)?.lat;

Answer 2

The mistake in the script is located on the following line:

let latitude = localStorage.getItem('coordinates.lat');

You are only able to retrieve local storage values with the exact key used when setting them, in this situation 'coordinates'. A more refined version of the script would be:

let coordinates = localStorage.getItem('coordinates');
const latitude = JSON.parse(coordinates)?.lat;

Answer 3

Answer №2

To access the property of an object in localStorage, you must first retrieve the string from storage, then deserialize it into an object before accessing its properties:

window.addEventListener('load', () => {
  const data = JSON.parse(localStorage.getItem('data'));
  const value = data?.value;

  if (!value)
    return; 
  
  // continue with your code...
}

Also, take note of using addEventListener() rather than onload, and using const instead of var as shown above.

Answer 4

To access the property of an object in localStorage, you must first retrieve the string from storage, then deserialize it into an object before accessing its properties:

window.addEventListener('load', () => {
  const data = JSON.parse(localStorage.getItem('data'));
  const value = data?.value;

  if (!value)
    return; 
  
  // continue with your code...
}

Also, take note of using addEventListener() rather than onload, and using const instead of var as shown above.

Update the item's location and retrieve the latitude

Answer №1

Answer №2

Similar questions

Tips for addressing: Slight alignment discrepancy when utilizing CSS display:inline-block and setting text-align:center on the parent element

Error message: Unchecked runtime error - Unable to retrieve data from the specified URL. The extension manifest must include permission to access this particular host. This issue is occurring in manifest

Check for length validation including spaces in JavaScript

Searching for a document using the $eq operator in MongoDB within the context of Next.js - what is

The CSS file that is defined first in the node.js HTML is the only one being utilized

Creating a text slider in Javascript with dual quote sets is a fun and interactive

Navigating within a Positioned Fontawesome Icon using CSS

Getting variables from different functions in Python can be achieved by using the return

Delay Time for Closing Sub Menus When Multiple Dropdowns are Opened

I am unable to click on the navigation buttons in my bootstrap template

Struggling to set up the Sneat HTML theme - I'm unable to configure the config.js file

Efficiently handling multiple form submissions using a single jQuery Ajax request

Ways to implement the function provided in the website using javascript

sending Ruby arrays to jQuery code in a Haml template within the Ruby on Rails framework

Hidden body text occurs when the div element is set to be sticky at the bottom

Is there a way for me to identify what deletes CSS classes from an element during the first page load?

Create a stunning design with Bootstrap 4 by incorporating a full-width background for both the table header and rows,

Most effective method to avoid updating a node_modules package

``Why isn't the Bootstrap dropdown menu button displaying properly on a Leaflet map?

Switch picture when hovering over button image