How to set session variable in jquery/css?

Question

jQuery(document).ready(function($){
    $("#a2").click(function(){
        $('body').css("cssText","font-size: 107% !important");
    });
});

jQuery(document).ready(function($){
    $("#a3").click(function(){
        $('body').css("cssText","font-size: 114% !important");
    });
});

jQuery(document).ready(function($){
    $("#a4").click(function(){
        $('body').css("cssText","font-size: 121% !important");
    });
});

I have given a2, a3, a4 ids to A, A+, A++ buttons. Whenever visitor of my site will click on any one of these buttons, font-size of whole site will change accordingly. Right now font-size is changing but when I refresh the page, again it is showing the default font-size. How can I do that? do I need to use session? and how I can use it in css or jquery ? I am new in website development. So please help me.

@Tamizh see http://www.stoimen.com/blog/2010/03/17/jquery-csstext-helps-you-improve-browser-reflows/ — Arun P Johny, Mar 24 '14 at 11:09
you need to store the style.. either in server or in client using cookie/webstorage — Arun P Johny, Mar 24 '14 at 11:09
See http://stackoverflow.com/questions/11580172/session-handling-in-jquery — Ganesh Jadhav, Mar 24 '14 at 11:10
You can use `sessions` or `localstorage` or some server-side variable to keep this permanent — alioguzhan, Mar 24 '14 at 11:10

score 1 · Accepted Answer · answered Mar 25 '14 at 05:43

following code i have written and it is working perfectly. I am sharing it so that other can refer it.

jQuery(document).ready(function($){
    var fontCookie = get_cookie('fontclass');
    if(fontCookie) {
        jQuery('body').addClass(fontCookie);
    }
    $("#a2").click(function(){
        jQuery('body').removeClass('body-18');
        jQuery('body').addClass('body-16');
        var now = new Date();
            var time = now.getTime();
            time += 3600 * 1000 * 700;
            now.setTime(time);
            document.cookie = 
            'fontclass=body-16' + 
            '; expires=' + now.toGMTString() + 
            '; path=/';
        event.preventDefault();
    });
});

like this I have added function for a1 and a3 also in which I am adding and removing css classes as per my requirement.

you might want to set the domain of the cookie too. – Waqas Memon Sep 19 '16 at 22:21 — Waqas Memon, Sep 19 '16 at 22:21

score 0 · Answer 2 · answered May 06 '14 at 12:17

0

Whenever you would be setting up a session variable, you must use AJAX to send a server side request, it is very light weight and does not require to load any external libraries

answered May 06 '14 at 12:17

Ashwin Balani

745
7
19

score 0 · Answer 3 · answered Jul 24 '23 at 19:45

If you want a value to stick on a user's whole session you will need to offload the storage of that value or values to the server side using something like PHP. Within your JavaScript you can run a function like this:

<script>
    $("#a2").click(function(){
        $('body').css("cssText","font-size: 107% !important");
        setSessionVar(107);
    });
    
    function setSessionVar(s) {
        $.post( requesturl, {
            s : s,
            destinationurl: "set_s.php"},
            function( data ) {
                console.log(data)
            }
        );
    }
</script>

set_s.php

<?php
$s = intval($_POST['s']);
if($s > 100) {
    $_SESSION['font_percent'] = $s;
    echo $s;
} else {
    $_SESSION['font_percent'] = 1000;
    echo 1000;
}
?>

Then in my markup I use a little PHP to set the var based on the server side session ID if it is set.

<?php
$font_percent = 0;
if(isset($_SESSION['font_percent'])) {
    $font_percent = intval($_SESSION['font_percent']);
}
echo '<script>'."\n";
echo 'var $font_percent = '.intval($font_percent).'."\n";
echo '</script>'."\n";
?>

After this you can use the var $font_percent to manipulate your CSS via JavaScript.

score -1 · Answer 4 · answered Mar 24 '14 at 11:10

-1

Session are stored on server. So, if you want to use session, you must use ajax to get and set information.

Easier solution is to use cookies that you can manage in javascript. see http://www.w3schools.com/js/js_cookies.asp

answered Mar 24 '14 at 11:10

Fabien

548
7
18

score -2 · Answer 5 · answered Mar 24 '14 at 11:22

To be specific to the question: jquery.session.js Plugin serves the purpose it requires JSON Plugin too http://code.google.com/p/jquery-json/

Store:

$(function() {
     $.session(“myVar, “value”);
});

Read:

$.session(“myVar)

If i didnt get you right, and if my above answer doesnt help your situation, your description says you want to store personalization information of the user, which is normally and usually either stored in cookies that expire after very long times or they are stored in databases at the back-end.

How to set session variable in jquery/css?

5 Answers5