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

blending javascript and php variables within ajax requests

I am working on a simple jQuery ajax feature, where I need to combine form data retrieved by JS with some PHP variables and send them all through ajax GET method. Here's what I have: var longform = $("input:text").serialize(); $.ajax({ url: & ...

phpjavascriptjqueryajax

The positioning of the center element within a Bootstrap navbar is influenced by the width of the left element

I recently started using bootstrap 3 and I'm trying to align my navbar to the center. I managed to achieve this with the help of this method, which is working well. Now, my issue is that the width of my navbar-brand element is affecting the position ...

htmlcsstwitter-bootstrapcenter

Instructions on utilizing slideDown() paired with appendTo()

I am looking to implement slideDown() alongside my appendTo() Below is the code I am currently using: $(document).ready(function() { var scntDiv = $('#add_words'); var wordscount = 1; $("#add_words").on("keyup","input[type='tex ...

javascriptjquery-uijquery

An image appears fractured when placed within a table cell, yet displays perfectly when positioned outside of the table

I am currently facing an issue with loading image files in table cells using jQuery. Here is the code snippet from my View: <table id="personDataTable" border="1"> <tr style="font-size:large; height:auto"> <th width="10 ...

jqueryhtmlimagemodel-view-controller

JavaScript barcode data input

I am working with 2 inputs - #barcode and #quantity. When using a barcode scanner, I can easily enter the quantity after scanning data by pressing the Tab key. Typically, the quantity is null, indicating one piece. Currently, my cursor is in the #quantity ...

javascriptjquery

Having trouble getting jQuery redirect to work on localhost?

When attempting to execute window.location.href = "www.example.com", the redirection works correctly. However, when trying to run window.location.href = "localhost:8000/example", nothing happens. What steps can I take to resolve this issue? EDIT: It is im ...

jquery

Unable to view sidebar navigation on the screen

I've been experimenting with the sidebar navigation from w3 schools, specifically trying to create a side-nav that opens from one div. You can see an example here: http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stack ...

javascriptjqueryhtmlcssw3.css

Class name that changes the cursor to a pointer shape in CSS

My question is: Are there any CSS classes or attributes in Bootstrap 4 specifically designed for applying the pointer: cursor property to buttons or links? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel= ...

csstwitter-bootstrapbootstrap-4

How can I address the variations in CSS appearance between Firefox and Google Chrome?

I'm currently working on a table with two cells in each row just for fun. For the first row, I want both cells to display the same picture. To achieve this, I wrote the following CSS: tr:nth-child(1){ background-image:url("cat.jpg"); background-size: ...

htmlcssgoogle-chromefirefox

Ionic version 4 ion-img eagerly preloads images instead of implementing lazy-loading

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

cssionic-frameworkionic4

Use jQuery to set different background images for multiple divs at random time intervals

I am facing a challenge with displaying multiple divs next to each other on my website, each with a unique background image. I have written a script that randomly changes the background images at different time intervals, but currently all the images chang ...

jquerybackground-imagesettimeout

How to access and retrieve selected checkbox values using jQuery

<form id="myform"> <input type='checkbox' name='foo[]' value='1'> <input type='checkbox' name='foo[]' checked='true' value='2' > <input type='checkbox' ...

javascriptjquery

The basic jQuery script is failing to function properly in the Opera browser

I've encountered an issue with a simple jQuery script I wrote. It seems to work fine on most browsers, except for Opera. Can anyone help me figure out what the problem might be? jQuery(document).ready(function() { jQuery("input:radio[name=virtuem ...

javascriptjqueryopera

Selecting a specific value in a row from an HTML table - a comprehensive guide

This is a similar structure where, if I check the first button, I can retrieve the January month savings stored in a text field. Hello everyone, I am looking to design a table that includes a checkbox in the first column of each row. Upon selecting this ...

jqueryhtmljinja2

Only two options available: validate and hide; no additional options necessary

Having some trouble understanding the logic behind a JavaScript script that is meant to display select options based on another select option. Any tips on how to hide unused options? For example: If TV is selected, only show options for device, tsignal, b ...

javascriptjqueryhtml

Obtain Data for Visualizing Graph with JSON within a Database-connected Graph (highchart.js)

In the process of creating a database-driven graph, I am utilizing libraries from Codepen. These libraries include: THIS and Highchart.js The HTML file on display simply showcases the chart, while the main data processing is handled in an index.js file t ...

javascriptjqueryjsonhtmlhighcharts

What is the best way to convert this JavaScript iteration function into jQuery?

I recently encountered an issue with my JavaScript function that returns a list of elements with the class ".youtube", loops through them, and calls another function. The JavaScript logic is flawless, but I wanted to convert it into jQuery for better reada ...

javascriptjqueryhtmlcss

Media queries in CSS appear to be dysfunctional when used on Microsoft Edge

@media (min-width: 992px) and (max-width: 1140px) { .mr-1024-none { margin-right: 0px !important; } .mt-1024 { margin-top: 1rem !important; } .d-1024-none { display: none !important; } } Utilizing the ...

javascriptcss

Is there a way to maintain the DRY principle in my MVC JQuery Ajax POSTs?

Currently, my method involves utilizing Ajax to send POST requests to the server: $("#my-check-box").change(function () { var value = $(this).attr("checked"); var url = '<%: Url.Routes().MyAction() %>'; $.ajaxSe ...

asp.net-mvcajaxjquery

Enhancing User Interfaces with JQuery UI Widgets and Dynamic AJAX Calls

Currently involved in geolocation and mapping work, I am creating a JQuery widget to ensure that the code is portable for future projects. However, I have hit a roadblock when it comes to making an AJAX request. Below are a couple of methods from my widge ...

javascriptjqueryajaxjquery-ui