What is the best way to maintain a font size of 150% even after refreshing the page or reopening it?

After successfully implementing two buttons that allow users to adjust the font size on my webpage, I noticed that upon refreshing or reopening the page, the font size resets to its default setting. How can I ensure that the font size remains at 150% even after the page is refreshed or reopened? Below is the jQuery code I am currently using:

$(document).ready(function() {

$("#l").click(function() {

    $("p").css("font-size","150%");

});

$("#n").click(function() {

    $("p").css("font-size","100%");

})

});

javascriptjqueryhtmlcssfonts

Answer №1

One interesting way to store data is by utilizing LocalStorage, which is supported in some browsers. This allows you to save a specific string representing the current font size, and then retrieve it when the page is loaded.

To save to Local Storage using JavaScript:

localStorage.setItem("fontSize", 15);

Retrieving the saved data:

$(document).ready(function() {
    var fontSize = localStorage.getItem("fontSize");
    // Additional code can be added here to adjust the font size based on the retrieved value
});

Answer №2

One user suggested using localStorage (thanks to Nicholas), but I decided to include it in my JSFiddle. Here is the code:

if (localStorage.fontSize)
{
    $('p').css('fontSize', localStorage.fontSize);
}

$("#m").click(function () {
    $("p").css("font-size", "150%");
    localStorage.fontSize = '150%';
});

$("#n").click(function () {
    $("p").css("font-size", "100%");
    localStorage.fontSize = '100%';
});

If you want to test it out, here's the JSFiddle link. Verify for yourself how the value persists across multiple runs.

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

Creating a timestamp with milliseconds in Node.jsORObtain

I'm looking for guidance on creating a datetime stamp like the one shown below using Node: 2019-02-20T10:05:00.120000Z To clarify, I need a date time format that includes milliseconds. Thank you in advance. ...

javascriptnode.js

Layering effect for the jumbotron text with parallax scrolling

Trying to make the text in the jumbotron hide underneath the container when scrolling, but it's not working as expected. How can I get 'Main Title Goes Here', 'Subtitle' and the blue box to go under the lorem ipsum text? I tried se ...

htmlcssbootstrap-4

Bidirectional data-binding in AngularJS for submitting form data via POST requests

Incorporating angularjs into my project, I am faced with the challenge of dynamically populating a form and then submitting the data via POST to a server. Initially, I set up a data variable in my controller for the purpose of later POSTing it: $scop ...

javascriptangularjsangularjs-directive

What is the method for inserting the document URL into a text input?

Can someone provide guidance on grabbing the top URL and inserting it into a text input field? I've tried the following method, but it's not working. Any suggestions or ideas? Additionally, is there a way to make this text input field uneditable? ...

javascripthtmlformsurl

"Issue with scaling on Responsive Canvas leading to blurriness

I am working on a Canvas project and I want to make sure it is easily navigated on any device, whether it's a desktop or mobile. To achieve this, I decided to make the canvas responsive. Originally, the canvas was set at 800x800 which looked fine but ...

javascripthtmlcsshtml5-canvas

CSS styling failing to meet desired expectations

Two different elements from different panels are using the same CSS styles, but one displays the desired text while the other does not. The CSS file in question is named grid.css. To see the issue firsthand on my live website, please visit: I am uncertai ...

javascripthtmlcss

Manipulating selected values in VueJs v-select using methods

I am currently working on achieving the following goal: When I select the option "Alle openstaande" (result_id = 0), I want to select all these result_ids: [-1,-2,-3,-5,-7,-8,-11,-12] and deselect result_id 0. The variable mergedResults stores an array o ...

javascriptlaravelvue.jsvuetify.jsv-select

Javascript added link padding not functioning correctly in Internet Explorer

After attempting to find a solution on my own, I've come to realize that this situation is quite unusual. The issue at hand involves adding a class to a link using JavaScript (specifically jQuery, although the framework may not be relevant in this ca ...

javascriptcssinternet-explorer

Adding variable data from an external file into Google Maps V3

Is it possible to use includes in Java for Google Maps like you can in PHP? Currently, I have code that assigns colors to polygons. var lineColor = { "Tornado Warning": "#FF0000", "Severe Thunderstorm Warning": "#FFFF33", "Flash Fl ...

javascriptgoogle-mapsgoogle-maps-api-3

Unable to fetch the webpage element object

While attempting to extract data from the historical table on investing.com, I encountered an issue where I couldn't retrieve the column item and an error occurred. Traceback (most recent call last): File "<ipython-input-119-ba739f477693>", ...

pythonhtml

If the display style value matches in JavaScript/jQuery

Is there a way to check if the display is equal to none or to table-row? Here's the code I'm using: Javascript/JQuery: function toggleDisplay(element){ var clickedElement = $(element).closest("li"); var pageList = $(".pagination li"); ...

javascriptjqueryif-statement

Running a JQuery function that triggers on page load to execute inline JavaScript specifically on select elements

In my form, there are 3 select drop-down menus that are dynamically populated based on previous selections using jQuery and Ajax. Everything works perfectly when filling out a new form entry and using the onchange event handler. Now, I need to display exi ...

javascriptjqueryajaxdrop-down-menuonload

Utilize a single JavaScript script to handle numerous HTML forms within the same webpage

I am currently facing an issue with a page that contains multiple forms needing the same JavaScript code. This specific code is designed to add more input fields to the form, which it does successfully. However, the problem lies in the fact that it adds in ...

javascriptjqueryhtmlformsreusability

How can I simultaneously submit both the file and form data from two separate forms on a single page using PHP?

My webpage features a form with a series of questions, each followed by an option to upload files if available. I made sure not to nest forms within each other, instead using a method where the upload form pops up separately. However, I encountered an issu ...

phpjavascripthtmlforms

Employing selenium for automated testing on a dynamic web application that dynamically generates its HTML elements using Javascript

I recently set up the stable-diffusion webUI on my system, and I'm looking to create a wrapper program that focuses on experimenting with different prompt generation techniques using various parameters like sampling methods and steps. Initially, I co ...

javascriptpythonhtmlselenium

Utilize PHP's IF/ELSE statements to showcase the outcome

In my problem, I have a sample code. What I aim to achieve is to notify the user if there is no data that matches the input they provided, specifically when searching for "Helloworld". I am considering using an if-else statement for validation to determine ...

phphtmlmysql

What is the process of running PHP in a .ctp file within the CakePHP framework?

I have recently started working with CakePHP and I have a question about how PHP code is executed in a file with the .ctp extension. Can you explain how PHP is processed within a .ctp file in CakePHP? Additionally, I'm also curious about executing PHP ...

phpcsscakephp

Changing the color of a Shader in ThreeJS: A guide

I am a beginner in Three Js and I am struggling with changing the color of my material when a button on the html page is pressed. Can anyone provide me with some suggestions? Below is the code snippet: This is how I define my material: var color2= new T ...

javascriptthree.js3d

Use jQuery to extract data from an external HTML file and then effortlessly fill multiple local <div> elements with just one quick retrieval of the data

I've implemented this code and it's working well, but I've noticed that it sends three requests to the webserver: var refreshspeed=1000 function moreSnow() { $("#uptimedynamic").load("index.html #uptimedynamic"); $("#cpuloa ...

jqueryhtmldynamicexternal

Save information from an HTTP request made with a manually entered URL

As I delve into the world of web development, a particular issue has me stuck. My current project involves implementing a user password reset feature. The process goes like this: the user receives an email with a URL containing a unique token, clicks on th ...

javascriptnode.jsexpressxmlhttprequest