Storing User Information in Cookies using jQuery

My current jQuery script is linked to a button and it functions by toggling font styles on a website by enabling or disabling a stylesheet upon clicking the button. Now, I want to enhance this functionality by saving user preference to a cookie so that their font choice persists across different parts of the site and sessions. Ideally, when a user clicks the button for the first time, the font changes as usual and the choice is saved in a cookie. Subsequent clicks should reflect this stored preference with an option to revert back to default font by erasing or changing the cookie value.

I have made numerous attempts to implement this feature but unfortunately, I haven't been successful in getting the cookie to save and maintain the font choice consistently. Any suggestions or assistance on how to achieve this will be highly appreciated.

jquerycsscookiesfonts

Answer №1

To enhance user experience, I recommend utilizing localStorage instead of cookies. By using a shim for MDN that seamlessly falls back to cookies when necessary, you can ensure compatibility across different browsers:

jQuery(function($) {
    if ( localStorage.getItem('font') ) {
        $('#opendyslexic').prop('disabled', localStorage.getItem('font') == 'true');
    }

    $('#opendyslexic-toggler').on('click', function() {
         $('#opendyslexic').prop('disabled', function(_, prop) {
              localStorage.setItem('font', !prop);
              return !prop;
         });
    });
});

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

Tips for customizing CSS in cakePHP 1.3

Hey there, I've come across an issue regarding the CSS for my search plugin. It seems that some of the CSS rules I set in /plugin/searchable/webroot/css/searchable_style are not being applied. My assumption is that it's being overridden by the de ...

csscakephpcakephp-1.3

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

I have a form input field where I enter data. The entered data is then displayed in a table as a new row, with the most recent entry at the top. What I want to achieve is to show only the newest row in the table and hide all other rows. When I hover over ...

javascriptcsshtml-tableexpandable

Accessing the jQuery Ajax success variable

I have a PHP function that returns an array with an element error containing the value 'ERR': var updatePaymentType = function(plan_pt_id, pt_id){ var error = null; var data = new Object() data["function"] = "update"; ...

phpjavascriptjqueryajax

Implementing bloginfo('template_directory') in jQuery for use in the Admin Panel

I've been attempting to customize the contact form 7 database and I need to use bloginfo('template_directory') in jQuery for it. Following suggestions from previous posts, I have tried: Adding a variable in header.php Utilizing wp_localiz ...

phpjqueryajaxwordpress

Is there a way to make images appear on the screen only when they come into view on

While exploring the internet, I came across something quite intriguing on a website: As you scroll down the page, images only load when they come into view in the browser window. This is a feature I have never seen before and I am curious if anyone else h ...

javascriptjqueryajaximage

Overlapping borders in Bootstrap 4 design

Working on my project with Bootstrap 4 and encountered a coding issue. Here is the code snippet: .form-info-tab { border: 1px solid #ccc; border-collapse: separate; border-spacing: 0px; padding:5px; text-align:center; } <link ...

htmlcssbootstrap-4

What could be causing wavesurferjs to exceed the boundaries of its parent div?

I need assistance with my wavesurferjs issue The waveform is overflowing the parent div This problem occurs for the first time and upon resize of the parent div Upon resizing, it should automatically adjust to fit the parent div Question: When the pare ...

javascriptjquerywavesurfer.js

Tips for navigating the HTML DOM without using window.scrollBy(x, y) (specifically for scrolling within an element)

Desiring to scroll down along with my selected document, I experimented with the following code. window.scrollTo(x, y); const body = document.getElementsByClassName("body")[0]; body.scrollTo(x, y); However, there are instances where it returns "undefined ...

javascripthtmlcssseleniumdom

Guide to clearing input fields and displaying an error message through Ajax when the requested data is not found within a MySQL database

I am looking for a way to clear the textboxes and display an alert message if the data is not found in the MySQL table. I encountered an issue when using type: 'json' as removing it makes the alert work, but then the data from the MySQL table doe ...

javascriptphpjquerymysqlajax

Repeatedly triggering the Jquery Dialog Event

When I open a calendar plugin in jquery dialog, I encounter a recurring issue. Every time I close and reopen the dialog, my calendar event onDayClick triggers multiple times – twice, thrice, and so on. <div id="show_calendar"> <div class="c ...

javascriptjqueryhtmldialogrepeat

The dropdown menu in Bootstrap is malfunctioning despite the up and down arrow keys working properly

I've been attempting to create a basic dropdown menu using Bootstrap dropdown, and so far, it's been working perfectly in most instances. However, on certain pages, when I click on the three dots that are supposed to activate the dropdown, nothin ...

phpjqueryhtmlcss

Struggling with incorporating a Carousel feature while navigating through an array

I am struggling to properly implement a carousel using the data from my Videos Array. Instead of getting the desired output where videos should slide one by one, all the videos in the Array are being rendered at the same time. <div id="carouselEx ...

htmlcssreactjscarouselbootstrap-5

difficulties arise when adjusting font size in html and css

When I first created an all HTML/CSS website, I used clickable images as a menu that scaled perfectly on all monitors and browsers. Now, for my new project, I wanted to use a background image for the menu with hyperlinked text on top. I thought setting the ...

htmlcssmenuscreen-resolutionfont-size

Styling the footer of a webpage using CSS to adapt to different browser

I am currently working on a webpage that includes a footer. The footer is positioned correctly, but I encounter an issue when resizing the browser from bottom to top. For further details, please refer to the image below: Below is the CSS code for my foote ...

csshtmlfooter

`Is there a way to modify the attribute text of a JSON in jQuery?`

I'm attempting to modify the property name / attribute name of my JSON object. I attempted it like this but nothing seems to change. After reviewing the input JSON, I need to convert it to look like the output JSON below. function adjustData(data){ ...

javascriptjquery

Resizing an image within a div with automatic adjustment, centered and aligned to the bottom position

I'm really struggling to understand this concept and not making much progress. I have a background image that automatically scales to fit the window size. In front of it, I want to center an image fixed to the bottom of the page, while still being sca ...

csshtmlpositionmarginautoscaling

Is there a way to substitute all underscores in HTML tag IDs and classes with a hyphen symbol?

I recently realized that I used underscores instead of hyphens in some of my CSS class and id names. To correct this, I want to replace all underscores with hyphens using the sublime text replace feature (ctrl + H). Is there a way to change underscores to ...

htmlcsssublimetext3

Elevate your website with a mesmerizing CSS effect: watch

I am trying to achieve a CSS3 effect where an image slides up when hovered over, similar to this. I came across this example, but I do not want to use the box's background property. <div class="box"> <img src=image/image.jpg> & ...

css

What is the best method for transferring form data to a string and storing it in localStorage effectively?

Is this the most efficient method for extracting form data into a string and storing it in localStorage? I developed this method independently, but I'm not an experienced programmer. It seems to work for my needs, but I'm unsure if it's com ...

javascriptjquery

Has $.support.fixedPosition feature been removed starting from version 1.8?

While browsing the jQuery changelog, I noticed that the $.support.fixedPosition feature introduced in version 1.7 seems to have disappeared in version 1.8. Can anyone shed some light on where it has been relocated or if it has been removed altogether? ...

jquery