Storing data in the browser's local storage using jQuery without requiring any CSS

I have a form that receives data and I am trying to save the first two pages of received data into localStorage:

<form id="myForm" method="post">
        Font Size (px): <input id="fontsize" type="text" name="fontsize" />
</form>


<script type="text/javascript">
  var inputX = document.getElementById('fontsize');
  var size = parseFloat(inputX.value);
  localStorage.setItem('size', size);

On the second page, I want to use jQuery to increase the font size:

$(document).ready(function(){
 var storedSize = localStorage.getItem('size');
 $("#info").css('font-size', storedSize + 'px');
});

However, nothing seems to happen. What could be the issue here?

Answer №1

Using a colon in jQuery is particularly useful for object notation, especially when passing an object of properties. Here's another way to set a CSS property:

$("#info").css({'font-size': fontsX + 'px'});

Alternatively, you can use a shorter version:

$("#info").css({fontSize: fontsX + 'px'});

This is because jQuery automatically normalizes snake-case names to camelCase.

Answer №2

The problem lies in your syntax – be sure to pass the css property and value as separate arguments, or you can also pass an object instead

$("#details").css('font-weight', weight +'px');

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

Oops! There was an error: Uncaught promise rejection: TypeError - Unable to access 'subscribe' property of null object (Ionic Angular)

I encountered an issue in my angular ionic project. When I log in, the first page displays the error "ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'subscribe' of null." However, upon reloading the page, the error disappears ...

The property 'apply' is trying to be accessed but is undefined and cannot be read

Not being an expert in frontend development, I've hit a roadblock on what seems like a simple issue. I'm attempting to load one set of nodes from a JSON file successfully, but when trying to add new nodes from another JSON file, I encounter this ...

Steps to create a slideup effect using JavaScript

Upon clicking the answer text area for the first time, a message box will appear. Your Answer Thank you for contributing an answer to this platform! Please remember that this is a Q&A site, not a forum for discussion. Include specifics and share you ...

Converting Coordinated Universal Time (UTC) to local Unix time: A step

I am currently working on a React application that includes a survey component. When a user decides to skip the survey, I want it to reappear after a certain amount of time has passed (measured in days or hours). The rejected time is provided in UTC format ...

Creating an outlined effect on a transparent image in a canvas: step-by-step guide

Currently, I am working on creating transparent images using canvas in HTML5 and I would like to incorporate borders into them. The issue I'm facing is that the "Stroke" property does not consider the transparency of the image and applies it as if it ...

Utilizing AngularJS to showcase and verify a form field populated by JSON data

I am looking to set up a form with validation and a submit button. As a beginner in Angular, I'm not entirely sure where to start. - I need some guidance on what Controller to use or perhaps a starting point. JS: myApp.controller('jsonCtrl&a ...

Having trouble with MUI auto import suggestions in my Next.js 13 project on VS Code

I'm currently developing a project using Next.js 13 and have installed MUI. However, I am encountering an issue where VS Code is not providing auto imports from the @mui/material library, as shown in the attached screenshot. https://i.stack.imgur.com ...

The standalone package for webpack's CLI tool has been introduced as webpack-cli

Currently venturing into the world of React.js, I decided to follow the tutorials provided on tutorialspoint. However, during the implementation phase, I encountered an error message in the console upon executing the 'npm start' command: C:&bsol ...

Retrieve the value of the specific element I have entered in the ngFor loop

I've hit a wall after trying numerous solutions. Here is the code I'm working with: HTML: import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styl ...

How can HTML text be highlighted even when it's behind a transparent div?

In my React application, I am facing an issue with a transparent div that serves as a dropzone for draggable elements. This div covers text and also contains children elements that may have their own text content. <Dropzone> <SomeChild> . ...

What is the reason behind classList returning 'undefined' unless getElementById is explicitly used?

Why is it that I can't seem to select multiple elements with the same class (using querySelector, querySelectorAll, getElementsByClassName, etc) and use classList to check if just one div contains a specific class? I've come across tutorials tha ...

Purge React Query Data By ID

Identify the Issue: I'm facing a challenge with invalidating my GET query to fetch a single user. I have two query keys in my request, fetch-user and id. This poses an issue when updating the user's information using a PATCH request, as the cach ...

Failing to retain hyperlinks with ajax

Currently, I am utilizing ajax to transmit data from a sophisticated custom field wysiwyg editor. Within this setup, the specific div with the class 'bio' is what I'm addressing. The issue arises when the data is retrieved - all the original ...

The FlatList glides effortlessly in any direction

My FlatList allows me to drag and move it in all directions (up/down/right/left) even though it appears vertically due to styling. The scroll bar still shows horizontally, which I want to disable. How can I achieve this? This is the code snippet for using ...

Navigating directly to a page in ReactJS and Redux without needing to login if a token is found in the local storage

Currently in the main component, it is set to automatically redirect to the Login page. However, I want to implement a check to see if a token is already stored in the local storage. If a token exists, I want the application to skip the Login page and dire ...

Using Vuejs to implement pagination on a weekly basis

I need some help with Vue pagination. I have a ticket object, and currently, it displays in a certain way. What I'm trying to achieve is to display the tickets weekly. For example, if this week is the 31st week of the year, then from today until Sunda ...

Can Vuejs delay the calculation of a computed property until the component is "ready"?

Within my Vue.js application, I have a `computed` property that relies on a value fetched from an AJAX call. I am looking for a way to delay the calculation of this `computed` property until after the `ready` method has completed. While everything is fun ...

Struggling to Align NAV buttons to the Right in React Framework

My current Mobile Header view can be seen here: https://i.stack.imgur.com/CcspN.png I am looking to achieve a layout similar to this, https://i.stack.imgur.com/pH15p.png. So far, I have only been able to accomplish this by setting specific left margins, ...

What is the process for implementing a title search filter in Vue.js?

Hey there, hoping you're having a good night! I've been trying to set up a bookstore using Vue.js with code retrieved from a Json api. However, I'm encountering some issues with the "computed" property. Here's the code snippet: new Vue ...

Encountering Reference Error while Using AWS Amplify with Nuxt.js: Navigator Undefined

Currently, I am experimenting with Nuxt.js and AWS Amplify to leverage the benefits of SSR/SEO for my project. I have successfully integrated Amplify into my project and followed the "Manual Configuration" steps outlined in the Amplify Docs to set it up. ...